<script>
$(document).ready(function() {
$(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
})
});
</script>
<script>
var dict1 = {'Canada': ['', 'Toronto'],'USA': ['', 'Hawaii']};
var dict2= {'Toronto': ['','A', 'B'],Hawaii': ['C']};
var dict3 = {'A': ['Item1', 'Item2'],
'B': ['Item3', 'Item4'],
'C': ['Item5', 'Item6']
};
var regionOption = document.querySelector("#municipality");
var districtOption = document.querySelector("#districtName");
var provOption = document.querySelector("#region");
var neighOption = document.querySelector("#selectNeigh");
createOption(provOption, Object.keys(regions));
provOption.addEventListener('change', function() {
createOption(regionOption, dict1[provOption.value]);
});
regionOption.addEventListener('change', function() {
createOption(districtOption, dict2[regionOption.value]);
});
districtOption.addEventListener('change', function() {
createOption(neighOption, dict3[districtOption.value]);
});
function createOption(dropDown, options) {
dropDown.innerHTML = '';
options.forEach(function(value) {
dropDown.innerHTML += '<option name="' + value + '">' + value + '</option>';
$(".chosen-select").trigger("chosen:updated");
});
};
</script>
<body>
<select id="region" style="width: 125px;"></select>
<select id="municipality" style="width: 125px;"></select>
<select id="districtName" style="width: 125px;"></select>
<form action="http://httpbin.org/post" method="post">
<select id="selectNeigh" multiple class='chosen-select'"></select>
</form>
</body>
我在将选中的选项存储到变量中时遇到了问题。我以前使用简单的HTML多选,并使用下面的代码来获取选中的选项:
const options = document.getElementById('selectNeigh').selectedOptions;
const values = Array.from(options).map(({ value }) => "'" + value + "'");
const output = values.join();
但是,我不知道如何使用jquery实现同样的事情。我尝试使用以下实现:JQuery - Multiple Select Options但未成功
最后,我想将存储值用于查询:
“X输入(“+输出+“)";
1条答案
按热度按时间0md85ypi1#
可以使用jQuery瓦尔()方法获取select元素的选定选项,在本例中,可以在ID为selectNeigh的select元素上使用该方法。
这将为您提供一个所选选项值的数组。