<p>I have a multiple selection SELECT field which I don't want the end user to be able to change the value of. </p>

<p>For UI reasons, I would like to be able to do this without using the disabled="true" attribute. I've tried using onmousedown, onfocus, onclick and setting each to blur or return false but with no success.</p>

<p>Can this be done or am I trying to do the impossible?</p>

[{'answer_id': 43880, 'author': 'ceejayoz', 'author_id': 1902010, 'author_profile': 'https://Stackoverflow.com/users/1902010', 'pm_score': 2, 'selected': False, 'text': '<p>Could you do it with an <code>onchange</code> event?</p>\n\n<pre><code>&lt;select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex"&gt;\n</code></pre>\n'}, {'answer_id': 43893, 'author': 'Jack M.', 'author_id': 3421, 'author_profile': 'https://Stackoverflow.com/users/3421', 'pm_score': 2, 'selected': False, 'text': '<p>Your best bet would be to swap out the options within the select box.  If you only have one answer in that box, it doesn\'t matter if it is clickable.</p>\n\n<p>I would, however,  try to find another way of doing this as it seems like it would cause frustration for a user.  Imagine this user scenario:</p>\n\n<ol>\n<li>"Look, a select box of options."</li>\n<li><em>click</em></li>\n<li>"Hrm, why didn\'t that work?"</li>\n<li><em>click</em></li>\n<li><strong><em>click</strong>!</em></li>\n<li>"This stupid thing is broken, I\'m never coming back here."</li>\n</ol>\n\n<p>If you swap out the select for HTML text, it accomplishes the same goal.  This is a fairly simple task for most of the major Javascript frameworks.</p>\n'}, {'answer_id': 43931, 'author': 'travis', 'author_id': 1414, 'author_profile': 'https://Stackoverflow.com/users/1414', 'pm_score': 4, 'selected': True, 'text': '<p>I know you mentioned that you don\'t want to, but I actually think that using the <code>disabled</code> attribute is a better solution:</p>\n\n<pre><code>&lt;select multiple="multiple"&gt;\n    &lt;option value="volvo" selected="true" disabled="disabled"&gt;Volvo&lt;/option&gt;\n    &lt;option value="saab" disabled="disabled"&gt;Saab&lt;/option&gt;\n    &lt;option value="opel" disabled="disabled"&gt;Opel&lt;/option&gt;\n    &lt;option value="audi" disabled="disabled"&gt;Audi&lt;/option&gt;\n&lt;/select&gt;\n</code></pre>\n\n<p>If necessary, you can always give the <code>select</code> a <code>class</code> and style it with CSS. This solution will work in all browsers regardless of scripting capabilities.</p>\n'}, {'answer_id': 43948, 'author': 'Jared', 'author_id': 1980, 'author_profile': 'https://Stackoverflow.com/users/1980', 'pm_score': 0, 'selected': False, 'text': '<p>@Jack &amp; @17 of 26, good point but the end user will be expecting the select box to be disabled so that confusion shouldn\'t be an issue. </p>\n\n<p>I should have been clearer about why I couldn\'t just disable the control. </p>\n\n<p>The application that will be using this will need to disable the selection of the options and there is a requirement that the "locked" control still maintain the look and feel of normal form controls.</p>\n'}, {'answer_id': 14748471, 'author': 'user1842841', 'author_id': 1842841, 'author_profile': 'https://Stackoverflow.com/users/1842841', 'pm_score': 0, 'selected': False, 'text': '<p>Try this trigger.</p>\n\n<pre><code>&lt;select multiple onchange="this.selectedIndex=this.selectedIndex"&gt;\n&lt;option&gt;1&lt;/option&gt;\n&lt;option&gt;2&lt;/option&gt;\n&lt;/select&gt;\n</code></pre>\n'}, {'answer_id': 49288620, 'author': "Eliseo D'Annunzio", 'author_id': 1739744, 'author_profile': 'https://Stackoverflow.com/users/1739744', 'pm_score': 0, 'selected': False, 'text': '<p>There is a recent new addition to CSS3 that is <a href="https://caniuse.com/#feat=pointer-events" rel="nofollow noreferrer">95% compatible</a> with all current browsers except Opera Mini, called <code>pointer-events</code>. Put simply, you can "disable" the default action on a <code>SELECT</code> or any other element, and still be able to perform specific events on it... </p>\n\n<p>You can view Chris Coyier\'s article on them at <a href="https://css-tricks.com/almanac/properties/p/pointer-events/" rel="nofollow noreferrer">enter link description here</a>.</p>\n\n<p>Is this closer to what you\'re looking for... Sorry that I couldn\'t provide any of my own coding examples...</p>\n'}]
['https://Stackoverflow.com/questions/43874', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1980/']