javascript - How to make multi level dropdown menu using select option mentod - Stack Overflow

admin管理员组

文章数量:1202863

i want to make multi level dropdown menu using select and option method

<select>
   <option value="" data-display-text="Select">None</option>
   <option value="oranges">SSC</option>
   <option value="oranges">GATE</option>
   <option value="bananas">BANK PO</option>
   <option value="bananas">RAILWAY</option>
 </select>

i want to make multi level dropdown menu using select and option method

<select>
   <option value="" data-display-text="Select">None</option>
   <option value="oranges">SSC</option>
   <option value="oranges">GATE</option>
   <option value="bananas">BANK PO</option>
   <option value="bananas">RAILWAY</option>
 </select>

• javascript
• html
• css
• web

Share Improve this question Follow asked Jun 5, 2017 at 10:52 BobbyBobby 8911 gold badge33 silver badges1313 bronze badges 2

• Are you trying to create some kind of navigation or are you trying to use "this" in a form? – Thomas Wikman Commented Jun 5, 2017 at 10:57
• just trying to make select dropdown – Bobby Commented Jun 5, 2017 at 11:08

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 6

As far as I understand from your "multi level dropdown" concept, you can make a simple dropdown and just move some elements with CSS. Category name is stored in optgroup.

<select name="select_projects" id="select_projects">
        <option value="">project.xml</option>
        <optgroup label="client1">
            <option value="">project2.xml</option>
        </optgroup>
        <optgroup label="client2">
            <option value="">project5.xml</option>
            <option value="">project6.xml</option>
            <optgroup label="client2_a">
                <option value="" style="margin-left:23px;">project7.xml</option>
                <option value="" style="margin-left:23px;">project8.xml</option>
            </optgroup>
            <option value="">project3.xml</option>
            <option value="">project4.xml</option>
       </optgroup>
       <option value="">project0.xml</option>
       <option value="">project1.xml</option>
    </select>

Update:
Or if you are trying to make a "chain" of dropdowns like you have in start menu in Windows, that is the easiest way to do it:
https://jqueryui.com/menu/

You can't make multiple levels with the select element.

In this case you would create a custom component with the capability to display something like 'hierarchic'.

Or use the trick like this:

<select>
    <option>select me</option>
    <option>&nbsp;me indented</option>
    <option>&nbsp;&nbsp;even more indentation</option>
</select>

If you want to use ONE select you could use <optgroup/>. See example. Note: it's not very multi-level, but it allows for some kind of relevant grouping.

<select>
  <option value="" selected="selected">Select an option...</option>
  <optgroup label="SSC">
    <option value="oranges1">some option</option>
    <option value="oranges2">some option</option>
    <option value="oranges3">some option</option>
  </optgroup>
  <optgroup label="GATE">
    <option value="bananas1">some option</option>
    <option value="bananas2">some option</option>
    <option value="bananas3">some option</option>
  </optgroup>
  <optgroup label="BANK PO">
    <option value="apples1">some option</option>
    <option value="apples2">some option</option>
    <option value="apples3">some option</option>
  </optgroup>
  <optgroup label="RAILWAY">
    <option value="grapes1">some option</option>
    <option value="grapes2">some option</option>
    <option value="grapes3">some option</option>
  </optgroup>
</select>

You can't make multiple levels with the select element.

Any ways, if its any help, there's

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Maybe this can insprire you even if not totally correctly interpreted by editors.

    <div class="col-2 search-filter">          
      <select id="searchByYear"  multiple="multiple"  ng-model="varYear.value">
        <option value="2023">2023
          <option value="2023-H1">H1</option>
          <option value="2023-H2">H2</option>
        </option>
        <option value="2022">2022
          <option value="2022-H1">H1</option>
          <option value="2022-H2">H2</option>
        </option>
        <option value="2021">2021
          <option value="2021-H1">H1</option>
          <option value="2021-H2">H2</option>
        </option>
        <option value="2020">2020
          <option value="2020-H1">H1</option>
          <option value="2020-H2">H2</option>
        </option>
        <option value="2019">2019
          <option value="2019-H1" >H1</option>
          <option value="2019-H2" >H2</option>
        </option>
     </select>       
    </div>      

本文标签： javascriptHow to make multi level dropdown menu using select option mentodStack Overflow