CODEWITHSUNDEEP
html
Rossati
Rossati

Reputation: 81

How Disable an option on Datalist

how can I disable an option in Datalist?

<input type="hidden" name="Town_Group" id="frmTown_Group">
<input name="Town" id="frmTown" list="frmTown_List">
<datalist name="Town_List" id="frmTown_List">
<option value="London">London</option>
<option value="Zurich">Zurich</option>
<option value="|" disabled=true >Italian</option>
<option value="Turin">Turin</option>
<option value="Milan">Milan</option>
<option value="Rome">Rome</option>
<option value="Naples">Naples</option>
<option value="|" disabled=true >French</option>
<option value="Bordeaux">Bordeaux</option>
<option value="Lion">Lion</option>
<option value="Paris">Paris</option>
</datalist>

I tried with disabled, the effect was that the option has disappeared.

Thanks Giovanni Rossati

Upvotes: 7

Views: 6019

Answers (1)

Thanveer Shah
Thanveer Shah

Reputation: 3323

In that case you can use readonly attribute like this, I wouldn't recommend this

<input type="hidden" name="Town_Group" id="frmTown_Group" />
<input name="Town" id="frmTown" list="frmTown_List" />
<datalist name="Town_List" id="frmTown_List">
      <option value="London">London</option>
      <option value="Zurich">Zurich</option>
      <option value=" " readonly>Italian</option>
      <option value="Turin">Turin</option>
      <option value="Milan">Milan</option>
      <option value="Rome">Rome</option>
      <option value="Naples">Naples</option>
      <option value=" " readonly>French</option>
      <option value="Bordeaux">Bordeaux</option>
      <option value="Lion">Lion</option>
      <option value="Paris">Paris</option>
    </datalist>

This is the only way because

Datalist vs Select:

  • I guess this is what you want, but there is no comparison. Datalist is different, Select is different.

  • datalist is used for autopopulating results from the list, based on
    user input, while select doesn't do any magic, it just shows all
    options it has.

  • so this makes clear that there shouldn't be any preselected value in
    datalist (as it is used to auto populate, on user interaction). thus
    it cant be readonly

  • select on other hand is different, it can have a default value, thus it can be readonly.

And yes what you said: "If you desire readonly or disabled, then use a select tag", yes, according to me its true, coz you cant set anything as selected in datalist, but you can in select.

Upvotes: 3

Related Questions