如何根据多选输入对optgroup进行过滤
如何根据多选输入对optgroup进行过滤
提问于 2020-06-17 17:01:05
假设我有一个集合选择输入和一个分组的集合选择，如下所示：
Input 1:
<select name="some_name_1" id="input_1_id">
<option value="1"> Java Developer </option>
<option value="2"> Ruby Developer </option>
<option value="3"> C# Developer </option>
</select>
Input 2:
<optgroup label="Java Developer">
<option value="1">Candidate A</option>
<option value="2">Candidate B</option>
</optgroup>
<optgroup label="Ruby Developer">
<option value="3">Candidate C</option>
<option value="4">Candidate D</option>
</optgroup>
<optgroup label="C# Developer">
<option value="5">Candidate E</option>
<option value="6">Candidate F</option>
</optgroup>我想要实现的是，第一个输入将允许用户选择多个选项，并根据选择的选项，第二个输入将被相应地过滤。
例如，假设用户在输入1中选择了"Java Developer“和"Ruby Developer”。
<optgroup label="Java Developer">
<option value="1">Candidate A</option>
<option value="2">Candidate B</option>
</optgroup>
<optgroup label="Ruby Developer">
<option value="3">Candidate C</option>
<option value="4">Candidate D</option>
</optgroup>这是我到目前为止编写的简化的JQuery代码：
$(document).on("turbolinks:load", function () {
input2_html = $('#input_2_id').html()
$('#input_1_id').on('change', function(e){
input1_text = $('#input_1_id :selected').text();
options = $(input2_html).filter("optgroup[label='" + input1_text + "']").html();
$('#input2_id').html(options).show();
});
})如果我从input 1中只选择了一个选项，上面的代码就会起作用，如果选择了多个选项，则不会起作用。如果有人能建议如何处理这种多选选项的情况，我将不胜感激。提前谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-17 18:39:09
以下代码将根据选定的input_1_id值自动显示/隐藏input_2_id中的optgroup元素
当input_2_id的值发生更改时，它还会重置input_1_id的value
var $input1 = $('#input_1_id'),
$input2 = $('#input_2_id'),
$input2optgroups = $input2
.find('optgroup');
$input1.change(function() {
$input2optgroups
.hide();
$(this)
.val()
.map(function(id) {
return $input1
.find('option[value=' + id + ']')
.text();
})
.forEach(function(text) {
$input2optgroups
.filter('[label="' + text + '"]')
.show();
});
$input2
.val(0);
})
.change();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple name="some_name_1" id="input_1_id">
<option value="1">Java Developer</option>
<option value="2">Ruby Developer</option>
<option value="3">C# Developer</option>
</select>
<select name="some_name_2" id="input_2_id">
<option value="0">Select..</option>
<optgroup label="Java Developer">
<option value="1">Candidate A</option>
<option value="2">Candidate B</option>
</optgroup>
<optgroup label="Ruby Developer">
<option value="3">Candidate C</option>
<option value="4">Candidate D</option>
</optgroup>
<optgroup label="C# Developer">
<option value="5">Candidate E</option>
<option value="6">Candidate F</option>
</optgroup>
</select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62425284
复制相关文章
相似问题
腾讯云开发者
