Question

I have a form where if the user changes the platform (operating system), an ajax call is called and the available models are retrieved in json format. I can get the ajax call to fire and I’m getting the data back formatted correctly but I can’t get the model drop down to update with the new value (json value pairs). I do not have ID’s because some of the rows are dynamically added so I need to reply on traversing the DOM with items such as .next(), .find(), etc, and I’m not very good with this yet.

Here is the form:

<div class="field inline">
<label class="frmFlds_labels">Platform</label>
<select name="platform" onChange="updateModels(this,18);" class="platform">
    <option value=""></option>
    <option value="IBM" selected="selected">AIX</option>
    <option value="HP">HP-UX</option>
    <option value="LINUX">Linux</option>
    <option value="SUN">Solaris</option>
    <option value="WINTEL">Wintel</option>
    <option value="Other">Other</option>
</select>
</div>
<div class="field inline" platform="IBM">
<label class="frmFlds_labels">Model</label>
<select name="model" class="model">
    <option value=""></option>
    <option value="LPAR on p550">LPAR on p550</option>
    <option value="LPAR on p561">LPAR on p561</option>
    <option value="LPAR on p570">LPAR on p570</option>
</select>

Here is the JS Code:

function updateModels(i,id){
var pltfrm = $(i).val();
var firstOption = $(this);
$.getJSON("index.cfm?do=misc.getModels&platform=" + pltfrm,
    function(j){
        var options = '';
        for (var i = 0; i < j.length; i++){
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
        firstOption.next().children('.model').html(options);
    });
}

Answer 1

IF you change your layout just a bit removing the code from the markup:
I added a custom attribute: data-id

<div class="field inline">
   <label class="frmFlds_labels">Platform</label>
   <select name="platform" data-id="18" class="platform">
     <option value=""></option>
     <option value="IBM" selected="selected">AIX</option>
     <option value="HP">HP-UX</option>
     <option value="LINUX">Linux</option>
     <option value="SUN">Solaris</option>
     <option value="WINTEL">Wintel</option>
     <option value="Other">Other</option>
 </select> 
</div> 
<div class="field inline" platform="IBM">
 <label class="frmFlds_labels">Model</label>
 <select name="model" class="model">
     <option value=""></option>
     <option value="LPAR on p550">LPAR on p550</option>
     <option value="LPAR on p561">LPAR on p561</option>
     <option value="LPAR on p570">LPAR on p570</option>
 </select> 
</div>

then use this:

function updateModels(p, id) {
    var firstOption = $(p);
    var pltfrm = firstOption.val();
    var model = firstOption.parent().next().find('.model');
    $.getJSON("index.cfm?do=misc.getModels&platform=" + pltfrm, function(j) {
        var options = '';
        for (var i = 0; i < j.length; i++) {
            options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
        }
        model.html(options);
    });
}
$('.platform').change(function() {
    var id = $(this).attr('data-id');
    updateModels($(this), id);// I do not see you using the id but...
});

EDIT: Different code if things get added dynamically to the page:

$(document).on('change','.platform', function() {
    var id = $(this).attr('data-id');
    updateModels($(this), id);// I do not see you using the id but...
});