Question

我在一个页面上工作，用户必须选择将在下拉菜单中的选项（选择标记）。我使用选择性来在选择标记上添加功能，但是当用户使用按钮添加更多选择输入时，第一个停止工作，但第二个工作完美。你可以看到：

＆＃13;

var numberofSelects = 0;
var maxSelects = 9; // 10 Inputs

function addInput() {
  if (numberofSelects < maxSelects) {
    numberofSelects++;
    var newSelect =
      'Input ' + numberofSelects + ' - <select id="model-select' + numberofSelects + '" value="Selecione">' +
      '<optgroup label="Fluorescente">' +
      '<option value="0">Fluorescente 20w</option>' +
      '<option value="1">Fluorescente 40w</option>' +
      '<option value="2">Fluorescente HO 40w</option>' +
      '</optgroup>' +
      '<option value="3">Metalica 400w</option>' +
      '</select><br>';
    document.getElementById("main").innerHTML += newSelect
    $('#model-select' + numberofSelects).selectize(); // Selectize the new select input
  } else {
    window.alert("Limit reached")
  }
}

$('#model-select0').selectize();

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>
<link href="https://selectize.github.io/selectize.js/css/selectize.css" rel="stylesheet"/>
<div id="main">
  <button onclick="addInput();">Add Input</button>
  <br> Input 0 -
  <select id="model-select0" value="Selecione">
    <optgroup label="Fluorescente">
      <option value="0">Fluorescente 20w</option>
      <option value="1">Fluorescente 40w</option>
      <option value="2">Fluorescente HO 40w</option>
    </optgroup>
    <option value="3">Metalica 400w</option>
  </select>
  <br>
</div>

＆＃13;

只有最后一个＆＃34;选择＆＃34;作品。我不明白为什么。我好几天都有这个问题。我将非常感谢你的帮助。

对不起英语。

Answer 1

问题是document.getElementById("main").innerHTML += newSelect。在MDN page上说：

删除所有元素的子元素，解析内容字符串并将结果节点指定为元素的子元素。

因此，首先删除所有子元素然后重新添加它们，元素是新元素并丢失所有JavaScript事件处理程序。

使用jQuery＆＃39; .append()进行简单的更改可以解决您的问题。

＆＃13;

var numberofSelects = 0;
var maxSelects = 9; // 10 Inputs

function addInput() {
  if (numberofSelects < maxSelects) {
    numberofSelects++;
    var newSelect =
      'Input ' + numberofSelects + ' - <select id="model-select' + numberofSelects + '" value="Selecione">' +
      '<optgroup label="Fluorescente">' +
      '<option value="0">Fluorescente 20w</option>' +
      '<option value="1">Fluorescente 40w</option>' +
      '<option value="2">Fluorescente HO 40w</option>' +
      '</optgroup>' +
      '<option value="3">Metalica 400w</option>' +
      '</select><br>';
    
    $('#main').append(newSelect);
    
    $('#model-select' + numberofSelects).selectize(); // Selectize the new select input
  } else {
    window.alert("Limit reached")
  }
}

$('#model-select0').selectize();

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>
<link href="https://selectize.github.io/selectize.js/css/selectize.css" rel="stylesheet"/>
<div id="main">
  <button onclick="addInput();">Add Input</button>
  <br> Input 0 -
  <select id="model-select0" value="Selecione">
    <optgroup label="Fluorescente">
      <option value="0">Fluorescente 20w</option>
      <option value="1">Fluorescente 40w</option>
      <option value="2">Fluorescente HO 40w</option>
    </optgroup>
    <option value="3">Metalica 400w</option>
  </select>
  <br>
</div>

＆＃13;

Answer 2

更改选择您的select元素的代码：

$('#model-select0').selectize();

到此：

$('select[id*="model-select"]').selectize();

由于$('#model-select0')仅选择您的单个select元素，而您希望选择所有select代码。

另一种解决方案（但会选择网页上的所有select元素）

$('select').selectize();

为什么不止一个选择输入不起作用？ - 选择

2 个答案: