Question

我想在多次选择/未选中选项时尝试完成onChange事件将调用一个函数来添加或删除选中/未选中的动态字段。

我已经尝试了几个小时来思考使其发挥作用的最佳逻辑方法。

＆＃13;

boldFont

＆＃13;

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

＆＃13;

我只需要一些指导，采用我应采取的最佳方法。

Answer 1

根据您的问题，每次用户从选择框中选择一个或多个元素时，函数必须执行以下操作：

如果选择了元素并且已经存在于div区域中：不执行任何操作
如果元素被选中但不存在于div区域中：insert
如果未选择该元素 - ＆gt;从div区域中删除元素

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

＆＃13;

$(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();
      }
    });
  });
});

＆＃13;

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

＆＃13;

Multiple Select onChange创建动态字段

1 个答案: