jQueryのは、私は次の配列持ち、他の選択ボックス

Question

に応じて選択して値を置き換えます。

var LWTable = []; 
LWTable.push([6,200,200,220]); 
LWTable.push([8,220,220,240]); 
LWTable.push([10,240,240,260]); 
LWTable.push([12,260,260,290]); 
LWTable.push([15,290,310,340]); 
LWTable.push([18,330,360,400]); 
LWTable.push([21,385,420,460]); 

そして、次のHTMLを：私が欲しいもの

<select name="plength" id="plength"> 
    <option value="6" selected>6 in.</option> 
    <option value="8">8 in.</option> 
    <option value="10">10 in.</option> 
    <option value="12">12 in.</option> 
    <option value="15">15 in.</option> 
    <option value="18">18 in.</option> 
    <option value="21">21 in.</option> 
</select> 
<select name="pwidth" id="pwidth"> 
    <option value="Width1" selected>Width 1 (xw1x)</option> 
    <option value="Width2">Width 2 (xw2x)</option> 
    <option value="Width3">Width 3 (xw3x)</option> 
</select> 

は私が値8を選択した場合ということであり、 xw1x、xw2x、xw3xの各文字列がMinLoadTableの値に置き換えられているので、この例では220,220,240と表示されます。 21を選択すると、自動的にその値が置き換えられますテキストは385,420,460です。

これは可能でしょうか？私はいくつかの例を調べようとしましたが、どこにも行かなかった... 助けや指示があれば幸いです！

Answer 1

JSコードのデータ構造をオブジェクトに変更することが可能であれば、これは非常に難しいことになります。最初に、オブジェクトのキーからロード時にplength選択オプションを作成することができます。その後、plengthを変更すると、選択した値を使用してオブジェクト内のキーを検索し、pwidthというオプションを設定できます。これを試してみてください：

var LWTable = { 
 
    '6': [200, 200, 220], 
 
    '8': [220, 220, 240], 
 
    '10': [240, 240, 260], 
 
    '12': [260, 260, 290], 
 
    '15': [290, 310, 340], 
 
    '18': [330, 360, 400], 
 
    '21': [385, 420, 460], 
 
} 
 

 
var plengthOptions = ''; 
 
Object.keys(LWTable).forEach(function(key) { 
 
    plengthOptions += '<option value="' + key + '">' + key + ' in.</option>'; 
 
}); 
 

 
$('#plength').append(plengthOptions).change(function() { 
 
    var pwidthOptions = ''; 
 
    LWTable[this.value].forEach(function(width, i) { 
 
    pwidthOptions += '<option value="Width' + (i + 1) + '">Width' + (i + 1) + ' (' + width + ')</option>'; 
 
    }); 
 
    $('#pwidth').html(pwidthOptions); 
 
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="plength" id="plength"></select> 
 
<select name="pwidth" id="pwidth"></select>

Answer 2

あなたは、次のような何かを試みることができる：

$(function(){ 
 

 
    var LWTable = []; 
 
    LWTable.push([6,200,200,220]); 
 
    LWTable.push([8,220,220,240]); 
 
    LWTable.push([10,240,240,260]); 
 
    LWTable.push([12,260,260,290]); 
 
    LWTable.push([15,290,310,340]); 
 
    LWTable.push([18,330,360,400]); 
 
    LWTable.push([21,385,420,460]); 
 
    
 
    $("#plength").change(function(){ 
 
     var ele = $(this) 
 
     var length = ele.val(); 
 
     var widths = LWTable.find(function(item){ 
 
      return item[0] == length; 
 
     }); 
 
     if(widths){ 
 
      var $pWidth = $("#pwidth"); 
 
      $pWidth.empty(); 
 
      $.each(widths.slice(1), function(key,value) { 
 
       var txt = 'Width'+(key+1)+' ('+value+')'; 
 
       $pWidth.append($("<option></option>") 
 
         .attr("value", value) 
 
         .text(txt)); 
 
      }); 
 
     } 
 
    }); 
 
    
 
    $("#plength").trigger("change"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="plength" id="plength"> 
 
    <option value="6" selected>6 in.</option> 
 
    <option value="8">8 in.</option> 
 
    <option value="10">10 in.</option> 
 
    <option value="12">12 in.</option> 
 
    <option value="15">15 in.</option> 
 
    <option value="18">18 in.</option> 
 
    <option value="21">21 in.</option> 
 
</select> 
 
<select name="pwidth" id="pwidth"> 
 
    <option value="Width1" selected>Width 1 (xw1x)</option> 
 
    <option value="Width2">Width 2 (xw2x)</option> 
 
    <option value="Width3">Width 3 (xw3x)</option> 
 
</select>