値を使用せずに2つのドロップダウンメニューを別のメニューにする方法

Question

現在、2番目と3番目のドロップダウンメニューを設定しようとしています。私はこの答えを探しましたが、うまくいくものは見つかりませんでした。私は後の説明と、コードのオプションをフィルタリングしたいと思いながら、

 <div class="form-group"> 
       <label>Item</label><br> 
       <select name="item" id="item"> 
        <option name="0">Choose an Item</option> 
        <option name="1">Item 1</option> 
        <option name="2">Item 2</option> 
        <option name="3">Item 3</option> 
       </select> 
      </div> 
     <div class="form-group"> 
      <label>Description</label><br> 
      <select name="description" id="description"> 
       <option name="0"></option> 
       <option name="1">Desc 1</option> 
       <option name="2">Desc 2</option> 
       <option name="3">Desc 3</option> 
      </select> 
     </div> 
     <div class="form-group"> 
      <label>Code</label><br> 
      <select name="code" id="code"> 
       <option name="0"></option> 
       <option name="1">Code 1</option> 
       <option name="2">Code 2</option> 
       <option name="3">Code 3</option> 
      </select> 
     </div> 


$("#item").change(function() { 
    if ($(this).data('options') == undefined) { 
     $(this).data('options', $('#description option').clone()); 
    } 
    var id = $(this).find('option:selected').attr("name"); 
    var options = $(this).data('options').filter('[name=' + id + ']'); 
    $('#description').html(options); 
}); 


$("#item").change(function() { 
    if ($(this).data('options') == undefined) { 
     $(this).data('options', $('#code option').clone()); 
    } 
    var id = $(this).find('option:selected').attr("name"); 
    var options = $(this).data('options').filter('[name=' + id + ']'); 
    $('#code').html(options); 
}); 

項目は、私が作っています最初の選択の名前である：ここでは私が働いているコードです。理想的には、選択された項目の名前は、その項目に関連付けられたオプションのみを表示するように、他のボックスをフィルタリングします。現在、コードは期待どおりに表示されますが、説明は表示されません。これを変えるには何ができますか？

私はDjangoで選択されたものを取得するときに値を取得したくないので、値の代わりにフィルタのキーとしてオプションの名前を使用しようとしています。代わりに、値を得られない方法があるが、代わりにテキストが私にばかげていると私に教えてください。

Answer 1

わかりました。前のオプションから選択した回答をコピーしない前のオプションとオプションに一致する項目だけを許可したい。それはあなたが望むものに近い場合にフィドルを見てください今、その後を教えてjsfiddle.net/mybkhw69/5

更新：jsfiddle.net/mybkhw69/11

$("#item").change(function() { 
    var id = $(this).find('option:selected').attr("name"); 
    $('#description').children('option').filter('[name!=' + id + ']').css('display', 'none').prop("selected", false); 
    $('#description').children('option').filter('[name=' + id + ']').css('display', 'block').first().prop("selected", true); 
    $('#code').children('option').filter('[name!=' + id + ']').css('display', 'none').prop("selected", false); 
    $('#code').children('option').filter('[name=' + id + ']').css('display', 'block').first().prop("selected", true); 
}); 

$("#description").change(function() { 
    var id = $(this).find('option:selected').attr("name"); 
    $('#code').children('option').filter('[name!=' + id + ']').css('display', 'none').prop("selected", false); 
    $('#code').children('option').filter('[name=' + id + ']').css('display', 'block').first().prop("selected", true); 
});