Drop down selection is still selectable with "readonly" attribute
<p>I want a read-only "select" element to be not selectable, the same behavior as the readonly input box. </p>

<p>In the code below, you cannot change the value for the input box with the value "abc". However, you can still change the selection in the drop. I can't use "disabled" attribute because I still need to send these values to the server. </p>

<pre><code>&lt;input type="text" readonly="readonly" value="abc"&gt;

&lt;/input&gt;

&lt;select readonly="readonly"&gt;
  &lt;option&gt;Item ABC&lt;/option&gt;
  &lt;option&gt;Item XYZ&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p><a href="https://jsfiddle.net/6Lu1jpLx/" rel="noreferrer">https://jsfiddle.net/6Lu1jpLx/</a></p>