我试图完成当在多个选择上选择/取消选择一个选项时,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>
我只需要一些关于我应该采取的最佳方法的指导。
最佳答案
根据您的问题,每次用户从选择框中选择一个或多个元素时,函数必须执行以下操作:
- 如果元素被选中并且已经存在于 div 区域中:不执行任何操作
- 如果元素被选中并且不存在于 div 区域中:插入
- 如果未选择该元素 --> 从 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>
关于javascript - Multiple Select onChange 创建动态字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35555992/