Nsryjdtyk

let prices = {"apple":[{value:3,desc:"Apple 1kg 3€"},{value:5,desc:"Apple 2kg 5€"},{value:7,desc:"Apple 3kg 7€"}],

             "banana":[{value:3,desc:"Banana 2kg 3.5€"},{value:5,desc:"Banana 4kg 7€"},{value:7,desc:"Banana 5kg 11€"}],

             "peach":[{value:3,desc:"Peach 1.5kg 3€"},{value:5,desc:"Peach 3kg 6€"},{value:7,desc:"Peach 4kg 7€"}]}



document.getElementsByName('fruit')[0].addEventListener('change', function(e) {

  document.getElementsByName('price')[0].innerHTML = prices[this.value].reduce((acc, elem) => `${acc}<option value="${elem.value}">${elem.desc}</option>`, "");

});

<select name="fruit">

  <option value="apple">Apple</option>

  <option value="banana">Banana</option>

  <option value="peach">Peach</option>

</select>

<br />

<select name="price">

  <option value="3">Apple 1kg 3€</option>

  <option value="5">Apple 2kg 5€</option>

  <option value="7">Apple 3kg 7€</option>

</select>

// First we initialize a variable with the fruits and their prices per kg

fruitPrices = {'apple':[3, 5, 6], 'banana':[4, 7, 10]}



// Listen to changes in selected fruit

$('#fruit-selector').on('change', function(element) {

  // Clearing the price selector and getting the selected fruit

  $('#price-selector').empty()

  chosenFruit = this.value;

  

  // For each price in the fruitPrices for this fruit

  for (fruitIndex in fruitPrices[chosenFruit]) {

      // Get the price and create an option element for it

      price = fruitPrices[chosenFruit][fruitIndex];

      price_option = '<option>{0} {1}kg {2}$<option>'.replace('{0}', chosenFruit).replace('{1}', fruitIndex + 1).replace('{2}', price);

      // Add the option to the price selector

      $('#price-selector').append(price_option)

  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id='fruit-selector' name="fruit">

    <option value="apple">Apple</option>

    <option value="banana">Banana</option>

    <option value="peach">Peach</option>

</select>



<select id='price-selector' name="price">



</select>

console.clear();



(function() {



  var fruitsField = document.querySelector('[name=fruits]')

  var amountField = document.querySelector('[name=amount]')

  var json = {};





  onReady(loadJson);

  fruitsField.addEventListener('change', populateAmount)





  function onReady(callback) {

    if (

      document.readyState === "complete" ||

      (document.readyState !== "loading" && !document.documentElement.doScroll)

    ) {

      callback();

    } else {

      document.addEventListener("DOMContentLoaded", callback);

    }  

  }



  function getSelectedFruit() {

    return fruitsField.value;

  }



  function populateFruits() {

    clearOptions(fruitsField)

    fruits = json.fruits

    for (var i in fruits) {

      addOption(fruitsField, i, fruits[i])

    }

  }



  function populateAmount() {

    clearOptions(amountField)

    var fruit = getSelectedFruit()

    fruits = json.fruits

    prices = json.prices[fruit]

    for (var i in prices) {

      addOption(amountField, i, fruits[fruit] + " " + i + "kg " + prices[i] + "€")

    }

  }



  

  // Load a json resource and start the fruit process

  function loadJson() {

    fetch('//api.jsonbin.io/b/5bf5645b746e9b593ec0e8b5')

    .then(function(response) {

      return response.json()

    })

    .then(function(response) {

      json = response

      populateFruits()

    })

    .catch(function(err) {

      console.error(err);

    })

  }





  // function loadJson() {

  //   var j = '{"fruits":{"apple":"Apples","banana":"Bananas","peach":"Peaches"},"prices":{"apple":{"1":3,"2":5,"3":7},"banana":{"1":4,"2":7,"3":10},"peach":{"1":5,"2":9,"3":13}}}'

  //   json = JSON.parse(j)

  //   populateFruits()

  // }



  function addOption(select, value, text) {

    var option = document.createElement('option')

    option.setAttribute('value', value)

    option.textContent = text

    select.appendChild(option)

  }



  function clearOptions(select) {

    var children = select.children

    var childrenToRemove = ;

    for (var i = 1; i < children.length; i++) {

      childrenToRemove.push(children[i])

    }

    for (var i = 0; i < childrenToRemove.length; i++) {

      select.removeChild(childrenToRemove[i])

    }

  }



}())

<form>

  <select name="fruits" size="4">

    <option value="0">Select Fruit</option>

  </select>

  <select name="amount" size="4">

    <option value="0" >Select Amount</option>

  </select>

</form>