CODEWITHSUNDEEP
htmljquerycss
user3217883
user3217883

Reputation: 1463

How to clear css from select element?

I have a select element and no matter what I try, the option values are blank. The number of options in the drop down is correct, but they are blank. Here is the html:

          <label for="accountBrokerageName">Brokerage:</label>
          <select id="accountBrokerageName">
             <option value="Interactive Brokers, LLC"></option>
             <option value="Vanguard"></option>
          </select>

I'm assuming some css from another library is overriding the standard select>option css. I've tried commenting out each linked library one at a time but no joy. I've tried adding a .clear-css class to the option like this:

.clear-css {
  all:unset;
}

and append it to all options using jquery just before it is used, like this:

$('option').addClass('clear-css');

Still blank.

I've also tried

.clear-css {
  all:initial;
}

Still blank.

I also tried adding the clear-css class to the select element, but that causes the whole select element to disappear.

Any suggestions?

Upvotes: 2

Views: 284

Answers (2)

user15246403
user15246403

Reputation:

You need to include the values for each option between the opening and closing <option> tags. The value doesn't need to match the text content. In fact, it's usually better to remove any special characters and even spaces when working with external APIs, like this:

// This JS is just for the sake of example, to log the new value with each change
const select = document.getElementById('accountBrokerageName');
select.addEventListener('change', () => console.log(select.value));
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
 <option value="" disabled selected>Choose an option...</option>
 <option value="interactive-brokers-llc">Interactive Brokers, LLC</option>
 <option value="vanguard">Vanguard</option>
</select>

Upvotes: 2

Brandon McConnell
Brandon McConnell

Reputation: 6119

Select values must be within the actual <option> tags:

<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
 <option value="Interactive Brokers, LLC">Interactive Brokers, LLC</option>
 <option value="Vanguard">Vanguard</option>
</select>

Upvotes: 2

Related Questions