使用两个下拉列表的值填充文本框

Question

I want to populate a text box with pre-defined values. This text box is read-only. User can select from 2 inter-dependent dropdown boxes. All this is part of a form in a bootstrap project.

Taking cue from this , I am able to populate second dropdown by selecting first. However, cannot combine the functionality of both and link them to the text box.

Code:

<select id="cat">
<option val="Laptops">Laptops</option>
<option val="Phones">Phones</option>
<option val="Tablets">Tablets</option>
<option val="PC">PC</option>
</select>
<select id="item"></select>
<input id='price' type='text' readonly/>

javascript:

Laptops=new Array("HP","Dell","Apple","Lenovo");
Phones=new Array('Samsung','Nokia','iPhone');
Tablets=new Array('Apple','Lenovo','Asus','Acer','HP');
PC=new Array('IBM','Macintosh','Dell');

populateSelect();

$(function() {

  $('#cat').change(function(){
    populateSelect();
  });
});

function populateSelect(){
cat=$('#cat').val();
$('#item').html('');
  eval(cat).forEach(function(t) { 
        $('#item').append('<option>'+t+'</option>');
    });
}

I have about 5 and 4 values in dropdowns 1 and 2 respectively. Not using database as of now.

How can we add price in text box when user selects from any of the dropdown?

Answer 1

As you want to show the price of the item, i don't see it in the curren object structure. So i've modified the object structure a bit.

Also i prefer using [] for array creation when compared to new Array.

Similarly i don't prefer using eval , instead as the variables are globally available they are properties of window object. So you can use window[property] to get that particular array. But instead I would prefer creating a new object and attaching all properties to that object. So that you can avoid polluting the global namespace.

Laptops=new Array({name : "HP", price : 200},{name : "Dell", price : 400},{name : "Apple", price : 400},{name : "Lenovo", price : 200});
Phones=new Array({name : "Samsung", price : 200},{name : "Nokia", price : 400},{name : "Apple", price : 400});
Tablets=new Array({name : "Apple", price : 200},{name : "Acer", price : 400},{name : "Lenovo", price : 400},{name : "Dell", price : 100});
PC=new Array({name : "Macnitosh", price : 200},{name : "Dell", price : 100});


$(function() {
function populateSelect(){
  var value = $("#cat").val();
  if(value) {
    console.log("value"+window[value]);
    $("#item").html("");
    $.each(window[value], function(index, val) {
      $("#item").append("<option value='"+val.price+"'>"+val.name+"</option>");
    });
  }
}
  $('#cat').change(function(){
    populateSelect();
  });
  populateSelect();

  $("body").on("change", "#item", function() {
    $("#price").val($(this).val());
  });
});

DEMO