0

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?

Community
  • 1
  • 1
user3017186
  • 167
  • 3
  • 13
  • Are you saying that an item's price depends on its category? Surely not - an item's price should be independent of how that item is categorised. – Roamer-1888 Mar 30 '15 at 09:31
  • Hi @Roamer-1888. Price is not dependent on category. The dropdowns are only to drill down the number of products and narrow the choice. I assumed it would be easy for user. If you believe otherwise, please share. – user3017186 Mar 30 '15 at 10:17

1 Answers1

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

mohamedrias
  • 18,326
  • 2
  • 38
  • 47
  • Hi @mohamedrias thanks for the superb solution. it worked like a charm. If its not too much to ask, may I request your help one more time. I am facing 2 little issues. a) when the page loads, the first values in both dropdowns are shown. Ideally, the corresponding price in textbox should also be selected. But that's not happening. b) Price in textbox is changing only when second dropdown is changed. When user changes first dropdown, price in textbox is shown for previous combination. Can we add a 'refresh' condition for this behaviour (pardon my layman knowledge of javascript). – user3017186 Mar 31 '15 at 07:00
  • You need to bind change event for the first select as well and call populateSelect() method. Also for on page load, trigger change event in #item element. – mohamedrias Mar 31 '15 at 07:25
  • Hi @mohamedrias, my knowledge of javscript or web technologies is close to zero. I have tried to tinker the code trying to incorporate your inputs, but no avail. Will it be possible for you to edit the code with a working example? – user3017186 Mar 31 '15 at 15:01