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>

我想要的是，当我为plength选择值8时，在pwidth选择框中，xw1x，xw2x和xw3x字符串被MinLoadTable中的值替换，因此在此示例中它将显示220， 220和240。当我选择21时，它将自动用385,420,460替换该文本。

这是可能的，如果是这样的话怎么样？我试着查看一些例子，但没有得到任何结果...... 任何帮助或指示将不胜感激！

Answer 1

如果可以将JS代码中的数据结构更改为对象，则可以使其非常严格。首先，您可以从对象的键创建加载的plength选项。然后，在更改plength时，您可以使用所选值来查找对象中的键，并填充pwidth的选项。试试这个：

＆＃13;

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();

＆＃13;

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

＆＃13;

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>

jQuery根据其他选择框替换select中的值

2 个答案: