Question

我想在选择框中“切换”选项列表。

我有两组选项作为字符串（美国各州和加拿大省）。但是，我注意到在DOM中，select对象没有'innerhtml'属性（至少不符合w3schools）。

我是否必须逐一删除并更换选项？我该怎么做呢？

Answer 1

利用jQuery，我通常会这样做：

var html = '[your html string with all the options elements]';
$('#mySelectId').empty();
$('#mySelectId').append(html);

至于一对一的想法，请确保牢记DOM交互的普遍缓慢。使用整个字符串进行批量替换会非常快，但是如果你为select中的每个元素操作DOM，那么期望它变慢。

Answer 2

我要做的是在DIV中创建两者;然后隐藏任何不需要的东西。这消除了对繁重的DOM操作的需要（因为你只是这样做一次，在页面加载时，在某些浏览器中泄漏内存的机会较少咳嗽），并且更难以意外地搞砸应用程序状态（与Alberta和Alabama共享相同代码的所有内容）。

这将是初始页面：

<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select"></div>
<div id="canada_select"></div>

和JavaScript一起使用它（为简洁起见，这里使用jQuery）：

$(document).ready(function(){
  // hide both <div> containers on page load
  $('#canada_select').hide();
  $('#usa_select').hide();
  // create and populate both <select> boxes:
  $('#canada_select').append('<select name="province_canada">'
      + '<option value="AL">Alberta</option>'
      + '<option value="BC">British Columbia</option>...'
      + '</select>'
  );
  $('#usa_select').append('<select name="state_usa">'
      + '<option value="AL">Alabama</option>'
      + '<option value="AK">Alaska</option>...'
      + '</select>'
  );
};

// we'll also need handlers to show the correct list, 
//  depending on the selected country
$('#country_usa').click(function(){
  // we want US states
  $('#canada_select').hide();
  $('#usa_select').show();
});    
$('#country_canada').click(function(){
  // we want Canadian provinces
  $('#usa_select').hide();
  $('#canada_select').show();
});

这应该是结果：

<input type="radio" id="country_usa" name="country" value="USA"> USA
<input type="radio" id="country_canada" name="country" value="Canada"> Canada
<div id="usa_select">
  <select name="state_usa">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    ...
  </select>
</div>
<div id="canada_select">
  <select name="province_canada">
    <option value="AL">Alberta</option>
    <option value="BC">British Columbia</option>
    ...
  </select>
</div>

在后端处理state_usa iff country =='USA';流程province_canada iff country =='加拿大'。

Answer 3

为什么不替换整个<SELECT>？有很多方法可以做到这一点。最简单的方法是将<SELECT>包装在SPAN / DIV中并替换其innerHTML。

如果您从数组中提取列表，可以将列表长度设置为零，然后insert the new elements in a loop。

Answer 4

当你说它们被保存为字符串时 - 你的意思是每个项目是一个单独的字符串，或者列表项目是一个字符串（即var variable =“<li>item 1</li><li>item 2</li>”;）

如果是后者，你能否在字符串中包含<select>标签并使用jQuery replaceWith函数？

Answer 5

如果您想要多次选择，只需在multiple="multiple"代码中添加select属性，或者如果您想进行单一选择，只需添加size=".."

批量更换选项html字符串内的选择？

5 个答案: