javascript - 如何使用js从下拉菜单中定位一个选项以应用更多代码

Question

一个 friend 让我帮助他制作一个表单，他的一个客户想要使一个表单更加动态......我的 JavaScript 充其量是最少的，因为我刚刚开始学习。

他问我一些类似“如何让表单仅在选择某个选项时才显示另一个下拉菜单”

在他给我的示例中，默认情况下，当页面加载时，他有一个下拉菜单，其中有 2 个选项，曼哈顿，选项二是布鲁克林。

如果选择曼哈顿，这将揭示曼哈顿的另一个带有 zipper 的下拉菜单，如果布鲁克林选择与 BK 相同。

在示例 html 中，类似这样的内容:

<div>

<form>
    <select name="boro" id="boro">
        <option value="manhattan" id="manh">Manhattan</option>
        <option value="brooklyn" id="brook">Brooklyn</option>
    </select>
</form>

<br/>

<div id="empty2fill"></div><!-- for showing chosen results -->

</div>

我想定位/捕获用户在上面的下拉菜单中选择的选项，然后激活此功能(如下)。

根据他的要求，我猜 id 要做的是(作为新手)，然后就 .js 而言(伪代码):

<script type="text/javascript">
function valBoro (){
    if( brook is chosen){ document.getElementById('empty2fill').innerHTML=" new dropdown code here")

    }

}

</script>

除了不知道之外，我的主要问题是我不知道如何将菜单中选择的选项定位到此后，应用该功能(稍后会写)

非常感谢任何想法、提示等。提前致谢

Answer 1

另一个选项是创建两个下拉列表并将样式显示设置为“无”。然后您可以捕获 onChange 事件并根据 select 元素的值将 display 设置为“”。

function showZip() {
    var boro = document.getElementById("boro");
    if (boro.value == "manhattan") {
        var zipManhattan = document.getElementById("zipManhattan");
        zipManhattan.style.display = "";
    }
}

在 html 中

<div>
    <select name="boro" id="boro" onchange="javascript:showZip();">
        <option value="manhattan" id="manh">Manhattan</option>
        <option value="brooklyn" id="brook">Brooklyn</option>
    </select>

    <br/>

    <select name="zipManhattan" id="zipManhattan" style="display:none;">
        <option value="zip1" id="zip1">1111</option>
        <option value="zip2" id="zip2">2222</option>
    </select>

    <div id="empty2fill"></div><!-- for showing chosen results -->
</div>