javascript - Multiple Select onChange 创建动态字段

Question

我试图完成当在多个选择上选择/取消选择一个选项时，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 区域中删除该元素

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

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