Question 160828 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can a dropdown be added to a selectbox in HTML using JS or jQuery?

I have a select box like this:

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

I want to make the second option in the list a dropdown and display a few more select options.

Can anyone please tell me how to accomplish this?

Thanks in advance!

Tags:

2

Answers


  1. 0

    HTML Select can only display one level.

    I shared an example, where we have two elements. The first one allows the user to choose a continent, while the second one allows the user to choose a country within the selected continent. The element groups the options within each continent.

    Note that the label attribute of the element is used to display the name of the group. When the user selects a continent from the first element, the options in the second element are dynamically updated to show only the countries within that continent.

    <label for="continent-select">Select a continent:</label>
<select id="continent-select" name="continent">
  <option value="">Choose a continent</option>
  <option value="north-america">North America</option>
  <option value="south-america">South America</option>
  <option value="europe">Europe</option>
</select>

<label for="country-select">Select a country:</label>
<select id="country-select" name="country">
  <option value="">Choose a country</option>
  <optgroup label="North America">
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="mexico">Mexico</option>
  </optgroup>
  <optgroup label="South America">
    <option value="brazil">Brazil</option>
    <option value="argentina">Argentina</option>
    <option value="chile">Chile</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="france">France</option>
    <option value="germany">Germany</option>
    <option value="italy">Italy</option>
  </optgroup>
</select>
    Login or Signup to reply.
  2. 0

    You can add a second select option and controlling when show or hide it.

    Example using pure 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>

    [Edited] Using two select with same name and values is possible too:

    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>

    You can use same name and values, only the id need to be unique.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search