我在将所选选项显示为列表时遇到问题。如何在选择的更改事件中循环访问多选下拉列表中的选定选项
这里只显示一个选定的选项，因为我没有任何循环浏览所选选项的想法
<select class="form-control selectpicker sel3" multiple data-live-search="true" id="sel3" name="course[]">
<option value="1">Disciplinary Procedure</option>
<option value="2">Office Methods</option>
<option value="3">Photoshop</option>
<option value="4">CIGAS</option>
<option value="5">Auditing</option>
</select>
$(document).ready(function() {
$("#sel3").change(function() {
var x = document.getElementById("sel3");
var i = x.selectedIndex;
document.getElementById("demo").innerHTML= x.options[i].text;
});
});
如果选择了前两个选项，则仅显示第一个选项
如果我正确阅读了您的问题，您的意思是选项标签的文本标签。只需使用.each()方法迭代每个选定的选项：
$('#sel3').on('change', function() {
var selectedTexts = [];
$('#sel3 option:selected').each(function(i, selectedOptions) {
selectedTexts.push($(selectedOptions).text());
});
console.log(selectedTexts);
});
如果要在 value 属性中显示数据，请改用$(selectedOptions).val()。
要使数组项转换为逗号分隔的列表，请使用selectedTexts.join();并将其分配为$('#demo').html( selectedTexts.join() )
下面是一个 jQuery 的例子
$(document).ready(function() {
$("#sel3").change(function() {
var html = "";
$("#sel3 option:selected").each(function(){
html += $(this).val() + $(this).text() + "<br/>";
});
$("#demo").html(html);
});
});
我做了一个没有jQuery的例子，将选定的选项作为一个字符串连接到演示元素中。 希望对您有所帮助。
var select = document.getElementById("sel3");
select.onchange = () => {
let selected = [];
for (let i = 0; i < select.options.length; i++) {
if(select.options[i].selected) {
selected.push(select.options[i].text);
}
}
document.getElementById("demo").innerHTML = selected.join(', ');
}
<select class="form-control selectpicker sel3" multiple data-live-search="true" id="sel3" name="course[]">
<option value="1">Disciplinary Procedure</option>
<option value="2">Office Methods</option>
<option value="3">Photoshop</option>
<option value="4">CIGAS</option>
<option value="5">Auditing</option>
</select>
<p id="demo">
Selections
</p>