Question

我想要的是，当我在下拉列表Type中选择某个类别时，我的第二个下拉列表Item应该会在Type的更改事件中动态更新。

如果我能够访问我在更改事件中创建的数组，我将能够在第二个下拉列表中获得确切的值。

但我不确定如何从那里提取值。

var type = ['fruit', 'fruit', 'fruit', 'veg', 'veg', 'veg', 'chinese', 'chinese', 'chinese', 'chinese'];
var item = ['apple', 'banana', 'orange', 'potatao', 'capsicum', 'carrot', 'noodles', 'momos', 'spring roll', 'soup'];

var select = document.getElementById("jqfrt");

for (var i = 0; i < type.length; i++) {
  var opt = type[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
};

$('#jqfrt').change(function(event, informationObj) {
  var selectedValue = $("#jqfrt").val();
  var itemsnew = [];
  for (var i = 0; i < type.length; i++) {
    if (selectedValue == type[i]) {
      itemsnew.push(item[i]);
    };
  };
  console.log(itemsnew);
});

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

我对JavaScript稍微有点新意，我们将不胜感激！感谢。

Answer 1

迭代数组并在select中附加值将起到作用

＆＃13;

var type = ['fruit', 'fruit', 'fruit', 'veg', 'veg', 'veg', 'chinese', 'chinese', 'chinese', 'chinese'];
var item = ['apple', 'banana', 'orange', 'potatao', 'capsicum', 'carrot', 'noodles', 'momos', 'spring roll', 'soup'];

var select = document.getElementById("jqfrt");


for (var i = 0; i < type.length; i++) {
  var opt = type[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);
};


$('#jqfrt').change(function(event, informationObj) {
  var selectedValue = $("#jqfrt").val();
  var itemsnew = [];
  for (var i = 0; i < type.length; i++) {
    if (selectedValue == type[i]) {
      itemsnew.push(item[i]);
    };
  };
  console.log(itemsnew);
  var select1 = document.getElementById("jqitm");
  select1.innerHTML = "";
  for(var i=0;i<itemsnew.length;i++){
    var opt = itemsnew[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select1.appendChild(el);
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="jqfrt" id="jqfrt">
 </select>
<select name="jqitm" id="jqitm">
 </select>

＆＃13;

另一件事是你不止一次追加这些类别，可以通过检查选项是否已经退出来解决这个类别if($(select).find('option[value="'+type[i]+'"]').length==0)

＆＃13;

var type = ['fruit', 'fruit', 'fruit', 'veg', 'veg', 'veg', 'chinese', 'chinese', 'chinese', 'chinese'];
var item = ['apple', 'banana', 'orange', 'potatao', 'capsicum', 'carrot', 'noodles', 'momos', 'spring roll', 'soup'];

var select = document.getElementById("jqfrt");
for (var i = 0; i < type.length; i++) {
  if($(select).find('option[value="'+type[i]+'"]').length==0){
  var opt = type[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select.appendChild(el);}
};


$('#jqfrt').change(function(event, informationObj) {
  var selectedValue = $("#jqfrt").val();
  var itemsnew = [];
  for (var i = 0; i < type.length; i++) {
    if (selectedValue == type[i]) {
      itemsnew.push(item[i]);
    };
  };
  console.log(itemsnew);
  var select1 = document.getElementById("jqitm");
  select1.innerHTML = "";
  for(var i=0;i<itemsnew.length;i++){
    var opt = itemsnew[i];
  var el = document.createElement("option");
  el.textContent = opt;
  el.value = opt;
  select1.appendChild(el);
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="jqfrt" id="jqfrt">
 </select>
<select name="jqitm" id="jqitm">
 </select>

＆＃13;

Answer 2

我建议使用不同的数据结构，因为建议将它们放在一起时保持一致。常见的数组索引是一个相当松散的连接。当您将食物类型设置为对象的键，并将这些项目作为这些属性的数组值提供时，您将拥有一个非常实用的基础。

其次，jQuery提供了导致更短代码的方法（例如$.map和.append）：

var data = {
    fruit: ['apple', 'banana', 'orange'],
    veg: ['potatao', 'capsicum', 'carrot'],
    chinese: ['noodles', 'momos', 'spring roll', 'soup']
};

$('#jqfrt').empty().append($.map(data, function (_, value) {
    return $('<option>').text(value);
})).change(function(event, informationObj) {
    $('#items').empty().append($.map(data[$("#jqfrt").val()], function (value) {
        return $('<option>').text(value);
    }));
}).change();

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

当数据无法结构化为其他格式时，从事件处理程序返回对象

2 个答案: