CODEWITHSUNDEEP
javascripthtmldatalist
Toniq
Toniq

Reputation: 5006

HTML datalist hide option from list

I am trying to hide an option from datalist (I am not trying to hide on user input). I tried adding hidden attribute but it still show in the dropdown. Also display:none doesnt seem to work. I can use javascript / jquery. Hiding select option would work like this:

mySelect.find('option[value='+something+']').prop('selected', false).hide()


<input list="test">
    <datalist id="test">
       <option value="Internet Explorer">
       <option value="Firefox">
       <option value="Chrome" hidden>
       <option value="Opera">
       <option value="Safari">
    </datalist>
    
    
    <input list="a">
    <datalist id="a">
       <option value="Internet Explorer">
       <option value="Firefox">
       <option value="Chrome" style="display:none;">
       <option value="Opera">
       <option value="Safari">
    </datalist>

Upvotes: 2

Views: 2204

Answers (1)

Justin Taddei
Justin Taddei

Reputation: 2266

<option>s can be omitted from the list using the disabled attribute.

document.getElementById('toggle').addEventListener('change', (e) => {
  let opt = document.querySelector('option[value=Chrome]')
  opt.toggleAttribute('disabled', e.target.checked)
})
<input list="test" />
<datalist id="test">
       <option value="Internet Explorer">
       <option value="Firefox">
       <option value="Chrome" disabled>
       <option value="Opera">
       <option value="Safari">
    </datalist>

<label>
  <input checked type="checkbox" id="toggle" />
  disable Chrome
<labe>

Upvotes: 1

Related Questions