javascript - HTML - 如何连接两个下拉菜单并使第二个下拉菜单可点击

标签 javascript html css dropdown clickable

我使用这段代码连接了两个下拉菜单:

<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>

    <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>

现在我想让第二个下拉菜单(型号)中的选项可点击。以另一个站点为例:每个模型的页面。所有发生在同一个页面中的一个

我正在使用 HTML 、 CSS 、 Java 脚本 ...

最佳答案

您正在使用脚本中的填充函数向第二个下拉列表添加选项。 是的,它将是可点击的,因为它是一个下拉选择选项。如果你想在第二次 drpdown 单击时触发功能,那么你可以像第一次添加一样添加 onchange。

关于javascript - HTML - 如何连接两个下拉菜单并使第二个下拉菜单可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50018011/

相关文章:

html - IE 和 FF 中的文本未居中对齐

css - 我们可以在已经使用 LESS 作为 css 预处理器的 Angular 1.6.6 中使用 SCSS css 预处理器吗?

html - 在背景图像周围定位按钮

javascript - 滚动条算法

javascript - 如何使用 javascript 更改 JSON 中根元素的名称?

javascript - 我应该在 JavaScript 中的什么地方使用按位运算符?

.net - 对 Microsoft WebSockets 命名空间感到困惑

css - 在 html Canvas 圆圈中有多个可点击的部分,在每个被点击的区域填充颜色

javascript - 运行函数的 OR 条件

iphone - 100% 宽度在移动 webkit 上不一致 - 仅限 Apple 设备