Javascript 模式下拉列表
我使用Bootstrap4创建了一个由四部分组成的模式下拉列表 前两个下拉列表执行时没有任何问题,显示所有可用值。但是,最后两个下拉列表不会执行下拉值 我在下面提供了示例代码,请检查代码并提供任何帮助。非常感谢Javascript 模式下拉列表,javascript,jquery,html,bootstrap-modal,Javascript,Jquery,Html,Bootstrap Modal,我使用Bootstrap4创建了一个由四部分组成的模式下拉列表 前两个下拉列表执行时没有任何问题,显示所有可用值。但是,最后两个下拉列表不会执行下拉值 我在下面提供了示例代码,请检查代码并提供任何帮助。非常感谢 <div class="form-group"> <label for="test1">Test1:</label> <select id="test1" name="test1" class="form-control linked-dropd
<div class="form-group">
<label for="test1">Test1:</label>
<select id="test1" name="test1" class="form-control linked-dropdown" data-
linked="test2">
<option value="">-- Select Test1 --</option>
<option value="Test1">Test1</option>
<option value="Test2">Test2</option>
</select><p> </p>
<div class="form-group">
<label for="test2">Test2:</label>
<select id="test2" name="test2" class="form-control linked-dropdown" data-
linked="test3">
<option value="">-- Select Test2 --</option>
</select><p> </p>
<div class="form-group">
<label for="test3">Test3:</label>
<select id="test3" name="test3" class="form-control linked-dropdown" data-
linked="test3">
<option value="">-- Select Test3 --</option>
</select><p> </p>
<div class="form-group">
<label for="test4">Test4</label>
<select id="test4" name="test4" class="form-control">
<option value="">-- Select Test4--</option>
</select><p> </p>
<button type="button" class="btn btn-very-light-gray" data-dismiss="modal"
id="clickButton">Submit</button>
<button data-dismiss="modal" class="btn btn-very-light-gray"
id="clickButton">Cancel</button></div>
</div></div></div></div></div></div>
<script>
$('#myModal').on('hidden.bs.modal', function () {
location.reload();
});
var dataFirstSelect={
option:[ 'Test1','Test2']
}
var dataSecondSelect={
Test1:['A','B'],
Test2:['E','F']
}
var dataThirdSelect={
Test1:['C','D'],
Test2:['G','H']
}
var dataFourthSelect={
'C’:[{form:'CNN',link:'https://www.cnn.com'}],
'D’:[{form:'MSNBC',link:'http://www.msnbc.com'},]
}
$('#test1').on('change',function(){
var a=$(this).val();
if(a!==''){
for(var i=0;i<dataSecondSelect[a].length;i++){
$('#test2').append($("<option></option>")
.attr("value",dataSecondSelect[a][i])
.text(dataSecondSelect[a][i]));
}
}
});
$('#test2').on('change',function(){
var a=$(this).val();
if(a!==''){
for(var i=0;i<dataThirdSelect[a].length;i++){
$('#test3').append($("<option></option>")
.attr("value",dataThirdSelect[a][i])
.text(dataThirdSelect[a][i]));
}
}
});
$('#test3').on('change', function() {
var b = $(this).val();
if (b !== '') {
for (var i = 0; i <dataFourthSelect[b].length; i++) {
$('#test4').append($("<option></option>")
.attr("value",dataFourthSelect[b][i].link)
.text(dataFourthSelect[b][i].form));
}
}
});
function openDoc(url){
window.open
(url,"_blank","menubar=yes,location=yes,resizable=yes,
scrollbars=yes,status=yes");
}
$('#clickButton').on('click',function(){
var data=new Object;
$('select').each(function(){
//console.log($(this));
data[$(this)["0"].id]=$(this).val();
});
openDoc(data.form);
});
</script>
首先,我建议您了解以下几点: 在处理这样的项目时,使用IDE自动检查语法或更健壮的代码编辑器,如VisualStudio代码或Sublime VSCode: 崇高: 使用开发人员工具控制台,您将看到错误和其他有用信息 Chrome开发者工具: 我在这里看到了两个需要解决的问题 初始化dataFourthSelect对象时出现语法错误。看起来您正在使用不同的样式引用来关闭关键点。以下是更正的版本:
var dataFourthSelect = {
'C' : [{
form: 'CNN',
link: 'https://www.cnn.com'
}],
'D' : [{
form: 'MSNBC',
link: 'http://www.msnbc.com'
}]
}
另一个问题是分配给a的值不是dataThirdSelect的键:
到
希望这能让你走上正轨。我不知道你在问什么。第四个下拉列表除了-selecttest4-之外没有其他选项。你在期待什么?也许这就是我错过的。你能澄清我将如何更正第四个下拉列表吗?添加一些选项?我已经修改了代码,但仍然不起作用。谢谢你的评论和反馈。你能更新上面的代码吗?你能更具体一点说什么仍然不起作用吗?谢谢你,通过这些修改,我能够执行第三和第四个下拉列表。最后一个问题是,对于第二个下拉列表,如果我对Test1和Test2有相同的值,让我们假设两者都有“A”值,我将如何在第三个下拉列表中区分这两个值?我已经更新了我的答案以回应您的评论。如果我回答了原来的问题,请把它标记为正确。
$('#test2').on('change', function() {
var a = $(this).val();
if (a !== '') {
for (var i = 0; i < dataThirdSelect[a].length; i++) {
$('#test3').append($("<option></option>")
.attr("value", dataThirdSelect[a][i])
.text(dataThirdSelect[a][i]));
}
}
});
var dataThirdSelect = {
Test1: ['C', 'D'],
Test2: ['G', 'H']
}
var dataThirdSelect = {
A : ['C', 'D'],
B : ['G', 'H'],
E : ['C', 'D'], //Fill these in with the desired values.
F : ['G', 'H']
}