是否有可能使用JavaScript或jQuery在HTML中的selectbox中给予类似下拉菜单的选项[关闭]

l5tcr1uw  于 2023-05-15  发布在  Java
关注(0)|答案(1)|浏览(90)

已关闭,此问题需要更focused。目前不接受答复。
**想改善这个问题吗?**更新问题,使其仅通过editing this post关注一个问题。

5天前关闭。
Improve this question
我有一个这样的选择框:

<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

我想使列表中的第二个选项成为下拉列表,并显示更多的选择选项。
有人能告诉我如何做到这一点吗?
先谢谢你了!

f3temu5u

f3temu5u1#

您可以添加第二个select选项并控制何时显示或隐藏它。
使用纯JavaScript的示例:

var cars = document.getElementById('cars');
var type = document.getElementById('type');

cars.addEventListener("change", () => {
  update(cars)
});

function update(cars) {
  if (cars.value === "saab") {
    type.classList.remove("hide");
  } else {
    type.classList.add("hide");
  }
}
.hide {
  display: none;
}
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select name="type" id="type" class="hide">
  <option value="x">Model X</option>
  <option value="y">Model Y</option>
  <option value="z">Model Z</option>
</select>
[已编辑]使用两个具有相同名称和值的select也是可能的:
var cars = document.getElementById('cars');
var type = document.getElementById('type');

cars.addEventListener("change", () => {
  update(cars)
});

function update(cars) {
  if (cars.value === "saab") {
    type.classList.remove("hide");
  } else {
    type.classList.add("hide");
  }
}
.hide {
  display: none;
}
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<select name="cars" id="type" class="hide">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

可以使用相同的名称和值,只需要id唯一即可。

相关问题