jQuery、json、drop down oh my

Question

ユーザーがプラットフォーム（オペレーティングシステム）を変更すると、ajax呼び出しが呼び出され、使用可能なモデルがjson形式で取得されるフォームがあります。私はAJAX呼び出しを呼び出すことができますし、データを正しくフォーマットし直していますが、モデル値を新しい値（json値のペア）で更新することはできません。 .next（）、.find（）などの項目をDOMにトラバースする必要があるので、いくつかの行が動的に追加されるためIDがありません。ここで

は形式です：

ここ

<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> 

はJSコード：トラバースを想定し

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

あなたのレイアウトは、マークアップからコードを削除するだけのビットを変更した場合：私は、カスタム属性を追加 ：物事が取得する場合、異なるコード：

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：その後、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> 

をこれを使用

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

Answer 2

は、選択に変更ハンドラからのものであり、firstOptionが選択され、次のものが必要親（）と次に（）に移動する

firstOption.parent().next().children('.model').html(options);