How to make option element readonly but not disabled the select element

Question

I tried setting readonly attribute to true, but it did not work as i am still able to select the value from dropdown.

<tr>
    <td>
        <select name="type" tabindex="0">
            <option value=""></option>
            <option value="first">first</option> 
            <option value="second">second</option>
        </select> 
    </td> 
</tr>

Does this answer your question? [How to disable an input type=text?](https://stackoverflow.com/questions/2874688/how-to-disable-an-input-type-text) — Amaresh S M, Jan 27 '20 at 05:51

score 7 · Accepted Answer · answered Jan 27 '20 at 05:50

7

You can use disabled on options instead of the whole select tag

<select name="type" tabindex="0">
 <option value="" disabled></option>
 <option value="first" disabled>first</option> 
<option value="second" disabled>second</option>
</select>

answered Jan 27 '20 at 05:50

ellipsis

12,049
2
17
33

Ok this way , Will I able to submit the value in the form ? – saloni Jan 27 '20 at 05:59
Yes you can submit the value in the form for the options which are "not disabled". The disabled ones will not be selected hence cannot be submitted. – ellipsis Jan 27 '20 at 06:01
No, basically I dont want user to select the value from dropdown but I need to myself set the value of dropdown according to some other fields below dropdown. So even I can hide also th options but whatevr value i set ..it should submit in form. – saloni Jan 27 '20 at 06:03
Ya you can give a default value to the select on the time of submission via js – ellipsis Jan 27 '20 at 06:04
Is it possible, If i stop user from expanding the dropdown itself? – saloni Jan 27 '20 at 06:06
Yes, set the disabled on the select tag – ellipsis Jan 27 '20 at 06:08
hmm that will not allow me to submit the type in form then, anyways I will go ahead with disabling options. – saloni Jan 27 '20 at 06:11
If you want you can custom dropdown that will give you more control including styling. – user93 Jan 27 '20 at 06:21

Sohail Ashraf · Answer 2 · 2020-01-27T06:11:56.630

Try this.

$(document).ready( function() {
  $('#select').change( function() {
    if($(this).val() !== '')  console.log($(this).val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="type" tabindex="0" id="select"> 
     <option value=""></option> 
     <option value="first" disabled>first</option> 
     <option value="second" disabled>second</option>
      <option value="Not disabled">Not disabled</option>
</select>

How to make option element readonly but not disabled the select element

2 Answers2