多选择onChange创建动态字段

Question

当一个选项在多个select上被选中/取消选择时，onChange事件将调用一个函数来添加或删除所选/未选择的动态字段。

几个小时以来，我一直在努力想出最合理的方法来让它发挥作用。

​

$('.multi-select').on('change', function() {
  $.each($(this).val(), function() {
   /* [ Some logic to check if a dynamic input should be removed or added. ]*/
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="multi-select" multiple>
  <option value="0" selected>Col 0</option>
  <option value="1">Col 2</option>
  <option value="2" selected>Col 2</option>
  ...
</select>

<div class="dynamic-fields">
  <input type="text" name="option[0]" value="asc">
  <input type="text" name="option[2]" value="desc">
</div>

​

我只是需要一些指导和最好的方法，我应该采取。

Answer 1

根据您的问题，每次用户从选择框中选择一个或多个元素时，函数都必须这样做：

1. 如果元素被选中并已在div区域中显示：“不做任何事情”
2. 如果元素被选中而不存在于div区域:插入
3. 如果没有选择元素->从div区域中移除元素

这里的困难是按名称选择一个元素，其中name属性包含一个方括号。

​

$(function () {
  $('.multi-select').on('change', function(e) {
    var cacheEle = $('.dynamic-fields');
    $(this).find('option').each(function(index, element) {
      if (element.selected) {
        if (cacheEle.find('input[name="option\\[' + element.value + '\\]"]').length == 0) {
          cacheEle.append('<input type="text" name="option[' + element.value + ']" value="' + element.text + '">')
        }
      }  else {
        cacheEle.find('input[name="option\\[' + element.value + '\\]"]').remove();
      }
    });
  });
});

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

<select class="multi-select" multiple>
    <option value="0" selected>Col 0</option>
    <option value="1">Col 1</option>
    <option value="2" selected>Col 2</option>
</select>

<div class="dynamic-fields">
    <input type="text" name="option[0]" value="asc">
    <input type="text" name="option[2]" value="desc">
</div>

​