Modify value of a HTML-select element using AJAX

Question

In my page there will be 2 select box [item, and sub-item]

<select id="item" name="item">
 <option value="1">Desktop</option>
 <option value="2">Laptop</option>
</select>


<select id="sub_item" name="sub_item">
</select>

When ever the user changes the item select-control, an event will send the selected-value to the server using jQuery and the server page will output something like this

DELL,39000
HP,32000

And the jQuery should add those values to the sub-item select box so it changes to

<select id="sub_item" name="sub_item">
 <option value="39000">Dell</option>
 <option value="32000">HP</option>
</select>

Problem: I can't code how to add/reset the select control for the sub-item

I don't have any code to share. If you want my SQL or JAVA code I can post it, but I think the backend has nothing to do with the jQuery modifying the sub-item's value

I don't exactly understand your question. Do you just want to add the items to the sub_item select box? — Hanlet Escaño, Aug 23 '12 at 06:12
you may find your solution http://stackoverflow.com/questions/11817641/populate-one-dropdown-based-on-selection-in-another-then-redirect , http://stackoverflow.com/questions/5686735/populate-one-dropdown-based-on-selection-in-another , http://stackoverflow.com/questions/12067192/changing-the-next-dropdown-value-with-previous-dropdown-onchange-event — 000, Aug 23 '12 at 06:23
then you may also check http://stackoverflow.com/questions/11660621/jquery-to-change-dropdown-with-ajax , http://stackoverflow.com/questions/11777454/how-to-change-second-drop-down-value-based-first-drop-down-selection , http://stackoverflow.com/questions/6652487/automatically-updating-dropdown-after-change-event , http://stackoverflow.com/questions/7803381/javascript-to-dynamically-populate-a-dropdown-list-box. Also please search thoroughly before posting.. — 000, Aug 23 '12 at 06:35

score 1 · Answer 1 · answered Aug 23 '12 at 06:15

assuming this as input, just a plain string

Your server will respond with the string DELL,39000 # HP,32000 ( Here # represents the second item. )

assign it to a variable in javascript

var data = response.split( "#"); // Splits the items

for( i=0; i < data.length; i++){
  $('#sub_item').append( '<option value='+data[i].split(",")[0]+'>'+data[i].split(",")[1]+'</option>');
}

This will append the data to the sub_item select box with the response from the Server

To clear the droddown

$'#sub_item').html('');

score 1 · Accepted Answer · answered Aug 23 '12 at 06:19

$.get('URL',function(data){
  //data should be DELL,39000 osv
  var items = data.split("\n");
  items.forEach(function(item){
    item = item.split(',');
    var option = $("<option></option>").text(item[0]).val(item[1]);
    $("sub_item").append(option);
  });
});

Change 'URL' to your url.

Not tested, but should work.

Modify value of a HTML-select element using AJAX

2 Answers2