[英]HTML - How to connect two dropdown and make the second one clickable
I connected two dropdown menus using this code: 我使用以下代码连接了两个下拉菜单:
<script>
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Chevy"){
var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
} else if(s1.value == "Dodge"){
var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
} else if(s1.value == "Ford"){
var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
and 和
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Chevy">Chevy</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
Choose Car Model:
<select id="slct2" name="slct2"></select>
now I want to make the options in the second dropdown menu (models) clickable. 现在,我想使第二个下拉菜单(模型)中的选项可单击。 To another sites for example : the page of each model.
以另一个网站为例:每个模型的页面。 All that happen in the same page inside one
所有这些都发生在同一页面的同一页中
I am using HTML , CSS, Java script ... 我正在使用HTML,CSS,Java脚本...
You are adding options to second dropdown using the populate function in script. 您正在使用脚本中的填充功能在第二个下拉菜单中添加选项。 And yes it will be clickable as it is a dropdown select options.
是的,它将是可单击的,因为它是一个下拉选择选项。 If you want to trigger function on second drpdown click then you can add onchange like you have added in first.
如果要在第二次drpdown上触发功能,则可以像第一次添加一样添加onchange。
For what I understood, you are looking something like this: 据我了解,您正在寻找这样的东西:
<select id="slct1" name="slct1">
<option value=""></option>
<option value="Chevy">Chevy</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select><br>
Choose Car Model:
<select id="slct2" name="slct2"></select>
I would rethink the Javascript part, and I would use jquery for accessing the DOM: 我将重新考虑Javascript部分,并使用jquery访问DOM:
// you can update this object to be as big as you want
var OPTION_ARRAY = {
chevy: {
camaro: {
value: 'camaro',
key: 'Camaro',
},
corvette: {
value: 'corvette',
key: 'Corvette',
},
},
dodge: {
avenger: {
value: 'avenger',
key: 'Avenger',
}
},
};
function cleanSelect2() {
$('#slct2').find('option').remove().end();
}
function fillSelect2(value) {
var values = OPTION_ARRAY[value.toLowerCase()];
var $mySelect = $('#slct2');
for (var element in values) {
if (values.hasOwnProperty(element)) {
$mySelect
.append($('<option></option>')
.attr('value', values[element].value)
.text(values[element].key));
}
}
}
$('#slct1').change(function() {
var $this = $(this);
var value = $this.val();
cleanSelect2();
fillSelect2(value);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.