Drop down selection is still selectable with "readonly" attribute - html

Question

I want a read-only "select" element to be not selectable, the same behavior as the readonly input box.
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.
<input type="text" readonly="readonly" value="abc">
</input>
<select readonly="readonly">
<option>Item ABC</option>
<option>Item XYZ</option>
</select>
https://jsfiddle.net/6Lu1jpLx/

Answer 1

Simplist way to resolve this would be to use the below line:
$("#MySelect").css("pointer-events","none");
However, the following worked for me where in my case I wanted my Select to still have the disabled cursor - setting 'pointer-events' to 'none' will no longer show cursor as 'not-allowed'.
JQUERY
var isReadOnly = $("#MyCheckbox").prop("checked");
var domElements = $("#MyInput, #MySelect");
$(domElements).prop("readonly", isReadOnly);
$(domElements).toggleClass("my-read-only-class", isReadOnly);
$(domElements).find("option").prop("hidden", isReadOnly);
CSS
.my-read-only-class
{
cursor: not-allowed;
}
JSFiddle https://jsfiddle.net/xdddzupm/

Answer 2

style="pointer-events: none;"
Is worked for me
<select style="pointer-events: none;">
<option>Item ABC</option>
<option>Item XYZ</option>
</select>

Answer 3

$("select :selected").each(function(){
$(this).parent().data("default", this);
});
$("select").change(function(e) {
$($(this).data("default")).prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select disabled>
<option value="foo1">foo1</option>
<option value="bar1" selected="selected">bar1</option>
<option value="test1">test1</option>
</select>
Try below code
<select>
<option value="foo1">foo1</option>
<option value="bar1" selected="selected">bar1</option>
<option value="test1">test1</option>
</select>