select onChange notworking-CodePudding

I have a sort function that is working when using a div and an a tag. But when change to a select option, it does not work.

         <select id="sort-container" onchange="sortCards()">

                <option>
                    <a href="javascript:sortCards('peoplecard', 'Services')">
                        Business 1
                    </a>
                </option>

                <option>
                    <a href="javascript:sortCards('peoplecard', 'Architect')">
                        Business 2
                    </a>
                </option>

                <option>
                    <a href="javascript:sortCards('peoplecard', 'Law')">
                        Business 3
                    </a>
                </option>
          </select>

CodePudding user response：

Change your html structure to this:

<select id="sort-container">
    <option value="services">
        Business 1
    </option>

Get select tag value in sortCards function:

const val = document.getElementById('sort-container').value;

CodePudding user response：

You need to pass arguments to the sortCards() function. You can put the second argument in the value of each option, and use this.value to get it.

<select id="sort-container" onchange="sortCards('peoplecard', this.value)">
  <option value='Services'>
    Business 1
  </option>

  <option value='Architect'>
    Business 2
  </option>

  <option value='Law'>
    Business 3
  </option>
</select>