如何通过选择一个选项来自动激活特定的选择/列表菜单？答案

【问题标题】：How to Make a specific Select/List menu active automatically by selecting an option?如何通过选择一个选项来自动激活特定的选择/列表菜单？
【发布时间】：2019-11-07 14:53:09
【问题描述】：

下面有一段html代码。会有两个下拉菜单显示。第一个选择城市，第二个选择与城市对应的餐厅。我想要的是， 1. 两个选择菜单都必须被任意选项选中，否则按钮将无法执行任何动作。 2.要从第二个菜单中选择餐厅，必须从第一个菜单中选择一个城市。或者它会显示一条错误消息，例如“首先选择您的城市”。 3.第二个菜单（restaurant_city）必须根据第一个菜单中选择的城市显示选项。例如;如果我选择 City_2 选项，第二个菜单将只显示 restaurant_city2 菜单中的所有选项。简而言之，激活哪个餐厅菜单必须取决于所选的城市。

不知道我说得有多清楚。如果有人理解我的问题，请帮我解决。我知道它将需要某种编程，例如 JS 或 PHP。我只想知道怎么做？？？

<select id="city">
       <option value="" disabled selected hidden>Select City</option>
           <option value="1">City_1</option>
           <option value="2">City_2</option>
</select> 

 <select id="restaurant_city1">
        <option value="" disabled selected hidden>Choose Restaurant</option>
        <option>Restaurant_1.1</option>
        <option>Restaurant_1.2</option>
        <option>Restaurant_1.3</option>
 </select> 

 <select id="restaurant_city2">
        <option value="" disabled selected hidden>Choose Restaurant</option>
        <option>Restaurant_2.1</option>
        <option>Restaurant_2.2</option>
        <option>Restaurant_2.3</option>
</select> 

<a class="btn_explore" href="#">Explore</a>

【问题讨论】：

你的服务器端是什么？你有城市和餐馆的数据库，还是纯粹的 html 解决方案？
我只使用 2 个选择，一个用于城市，一个用于餐厅。当页面加载时，城市选择也会被加载。然后使用 javascript 来检测用户何时选择了一个城市，对服务器进行 ajax 调用以获取该城市的餐厅列表并动态填充餐厅选择。
如果到目前为止你得到的最好的结果是“我知道它需要某种编程，比如 JS 或 PHP。”，那么我认为这个问题对于这个网站。在那个阶段，你应该通过一些初学者的教程来大致了解你将要使用的技术，并进行自己的适当研究，了解如何完成这样的事情。（这并不完全是一个从未有人遇到过的新要求。）
@GeorgeDryser 目前它只是纯 html。没有连接数据库。

标签： javascript php html

【解决方案1】：

您需要使用 JavaScript 或 JQuery。在我的示例中，我只是使用 JavaScript。您需要找到select 标签中的Id 并从那里开始工作。您可以根据您选择的城市的价值显示和隐藏您的选项。另外，我补充说，如果用户尝试选择第二个下拉项目而不选择城市，那么餐厅下拉菜单将被禁用，直到选择一个城市。我也为“探索”按钮添加了类似的功能。它确保在单击探索之前填充两个下拉列表。这只是一个快速拼凑的代码，所以它不是最好的代码。但希望它能让你走上正轨。

Jsfiddle：https://jsfiddle.net/m8x6537n/4/

【讨论】：