blocks|key|516675|text|不存在只读下拉菜单。您可以在每次更改后手动将其重置为第一个值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|516676|$("select").change(function(event)+{
++++$(this).val($(this).find("option").first().val());
});|code-block|syntax|javascript|516677|http://jsfiddle.net/4aHcD/|offset|length|516678|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>There is no such thing as a read-only drop-down. What you could do is reset it to the first value manually after each change.</p>

<pre><code>$("select").change(function(event) {
    $(this).val($(this).find("option").first().val());
});
</code></pre>

<p><a href="http://jsfiddle.net/4aHcD/" rel="nofollow">http://jsfiddle.net/4aHcD/</a></p>


blocks|key|733173|text|$('#cf_1268591').attr("disabled",+true);+|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|733174|下拉列表始终为只读。您所能做的就是禁用它|unstyled|733175|如果使用表单，则禁用的字段不会提交，因此请使用隐藏字段来存储禁用的下拉值|733176|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$('#cf_1268591').attr("disabled", true); 
</code></pre>

<p>drop down is always read only . what you can do is make it disabled </p>

<p>if you work with a form , the disabled fields does not submit , so use a hidden field to store disabled dropdown value</p>


blocks|key|516774|text|此代码将首先存储每个下拉列表中的原始选择。然后，如果用户更改了选择，它会将下拉菜单重置为其原始选择。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|516775|http://jsfiddle.net/4aHcD/22/|offset|length|516776|//store+the+original+selection
$("select+:selected").each(function(){
++++$(this).parent().data("default",+this);
});

//change+the+selction+back+to+the+original
$("select").change(function(e)+{
++++$($(this).data("default")).prop("selected",+true);
});|code-block|syntax|javascript|516777|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|T|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|C]]]]

<p>This code will first store the original selection on each dropdown. Then if the user changes the selection it will reset the dropdown to its original selection.</p>

<p><a href="http://jsfiddle.net/4aHcD/22/" rel="nofollow">http://jsfiddle.net/4aHcD/22/</a></p>

<pre><code>//store the original selection
$("select :selected").each(function(){
    $(this).parent().data("default", this);
});

//change the selction back to the original
$("select").change(function(e) {
    $($(this).data("default")).prop("selected", true);
});
</code></pre>


blocks|key|733306|text|这是一篇古老的文章，但我想提醒那些会找到它的人。注意使用名称为got元素的disabled属性。这很奇怪，但似乎不是很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733307|这不起作用：|733308|<script+language="JavaScript">
function+onChangeFullpageCheckbox()+{++++
$('name=img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>|code-block|syntax|javascript|733309|这项工作：|733310|<script+language="JavaScript">
function+onChangeFullpageCheckbox()+{++++
$('#img_size').attr("disabled",$("#fullpage").attr("checked"));
</script>|733311|是的，我知道我最好使用prop而不是attr，但至少现在prop不能工作了，因为jquery的旧版本，现在我不能更新它，不要问为什么……html差异只是添加了id：...|733312|<select+name="img_size"+class="dropDown"+id="img_size">
<option+value="200">200px
</option><option+value="300">300px
</option><option+value="400">400px
</option><option+value="500">500px
</option><option+value="600"+selected="">600px
</option><option+value="800">800px
</option><option+value="900">900px
</option><option+value="1024">1024px
</option></select>

<input+type="checkbox"+name="fullpage"+id="fullpage"+onChange="onChangeFullpageCheckbox()"+/>|733313|..。|733314|我没有发现脚本中有任何错误，在有名称的版本中，控制台中没有错误。但当然，这可能是我在代码中的错误|733315|显示在:+Win+7+Pro上的Chrome+26|733316|很抱歉我的语法不好。|733317|entityMap^0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>It is an old article, but i want to warn people who will find it.
Be careful with disabled attribute with got element by name. Strange but it seems not too work.</p>

<p>this do not work:</p>

<pre><code>&lt;script language="JavaScript"&gt;
function onChangeFullpageCheckbox() {    
$('name=img_size').attr("disabled",$("#fullpage").attr("checked"));
&lt;/script&gt;
</code></pre>

<p>this work:</p>

<pre><code>&lt;script language="JavaScript"&gt;
function onChangeFullpageCheckbox() {    
$('#img_size').attr("disabled",$("#fullpage").attr("checked"));
&lt;/script&gt;
</code></pre>

<p>Yes, i know that i better should use prop and not attr, but at least now prop will not work because of old version of jquery, and now i cant update it, dont ask why...
html difference is only added id:
...</p>

<pre><code>&lt;select name="img_size" class="dropDown" id="img_size"&gt;
&lt;option value="200"&gt;200px
&lt;/option&gt;&lt;option value="300"&gt;300px
&lt;/option&gt;&lt;option value="400"&gt;400px
&lt;/option&gt;&lt;option value="500"&gt;500px
&lt;/option&gt;&lt;option value="600" selected=""&gt;600px
&lt;/option&gt;&lt;option value="800"&gt;800px
&lt;/option&gt;&lt;option value="900"&gt;900px
&lt;/option&gt;&lt;option value="1024"&gt;1024px
&lt;/option&gt;&lt;/select&gt;

&lt;input type="checkbox" name="fullpage" id="fullpage" onChange="onChangeFullpageCheckbox()" /&gt;
</code></pre>

<p>...</p>

<p>I have not found any mistakes in the script, and in the version with name, there was no errors in console. But ofcourse it can be my mistake in code</p>

<p>Seen on: Chrome 26 on Win 7 Pro</p>

<p>Sorry for bad grammar.</p>


blocks|key|733352|text|我发现，更好的方法是使用CSS删除指针事件并修改下拉列表的不透明度(尝试0.5)。这为用户提供了这样的外观:它被正常禁用，但仍会发布数据。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733353|诚然，这在向后兼容性方面有一些问题，但在我看来，这是一个比绕过恼人的禁用/只读问题更好的选择。|733354|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>I've found, a better way to do this is to use CSS to remove pointer-events and modify the opacity on the drop down (try 0.5). This gives the appearance to the user that it is disabled as normal, but still posts data.</p>

<p>Granted this has some issues with backwards compatibility, but is in my opinion a better option than getting around the annoying disabled/readonly issue.</p>


blocks|key|516978|text|为了简单起见，这里有一个jQuery插件，它可以很轻松地做到这一点：https://github.com/haggen/readonly|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|516979|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/haggen/readonly^0|Y|Y|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>To simplify things here's a jQuery plugin that does that without the hassle: <a href="https://github.com/haggen/readonly" rel="noreferrer">https://github.com/haggen/readonly</a></p>


blocks|key|733416|text|此行将readonly属性的selects设为只读：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|733417|$('select[readonly=readonly]+option:not(:selected)').prop('disabled',+true);|code-block|syntax|javascript|733418|entityMap^0|3|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>This line makes selects with the <code>readonly</code> attribute read-only:</p>

<pre><code>$('select[readonly=readonly] option:not(:selected)').prop('disabled', true);
</code></pre>


blocks|key|733470|text|我会禁用这个字段。然后，当表单提交时，使其不被禁用。在我看来，这比处理隐藏字段要容易得多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733471|//disable+the+field
$("#myFieldID").prop(+"disabled",+true+);+++++++++++

//right+before+the+form+submits,+we+re-enable+the+fields,+to+make+them+submit.
$(+"#myFormID"+).submit(function(+event+)+{
++++$("#myFieldID").prop(+"disabled",+false+);
});+++++|code-block|syntax|javascript|733472|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I'd make the field disabled.  Then, when the form submits, make it not disabled.  In my opinion, this is easier than having to deal with hidden fields.</p>

<pre><code>//disable the field
$("#myFieldID").prop( "disabled", true );           

//right before the form submits, we re-enable the fields, to make them submit.
$( "#myFormID" ).submit(function( event ) {
    $("#myFieldID").prop( "disabled", false );
});     
</code></pre>


blocks|key|517128|text|正如@Kanishka所说，如果我们禁用一个表单元素，它将不会被提交。我已经为这个问题创建了一个代码片段。当select元素被禁用时，它会创建一个隐藏的输入字段并存储值。当它被启用时，它会删除创建的隐藏输入字段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517129|More+info|offset|length|517130|​|517131|jQuery(document).ready(function($)+{
++var+$dropDown+=+$('#my-select'),
++++name+=+$dropDown.prop('name'),
++++$form+=+$dropDown.parent('form');

++$dropDown.data('original-name',+name);+//store+the+name+in+the+data+attribute+

++$('#toggle').on('click',+function(event)+{
++++if+($dropDown.is('.disabled'))+{
++++++//enable+it+
++++++$form.find('input[type="hidden"][name='+%2B+name+%2B+']').remove();+//+remove+the+hidden+fields+if+any
++++++$dropDown.removeClass('disabled')+//remove+disable+class+
++++++++.prop({
++++++++++name:+name,
++++++++++disabled:+false
++++++++});+//restore+the+name+and+enable+
++++}+else+{
++++++//disable+it+
++++++var+$hiddenInput+=+$('<input/>',+{
++++++++type:+'hidden',
++++++++name:+name,
++++++++value:+$dropDown.val()
++++++});
++++++$form.append($hiddenInput);+//append+the+hidden+field+with+same+name+and+value+from+the+dropdown+field+
++++++$dropDown.addClass('disabled')+//disable+class
++++++++.prop({
++++++++++'name':+name+%2B+"_1",
++++++++++disabled:+true
++++++++});+//change+name+and+disbale+
++++}
++});
});|code-block|syntax|javascript|517132|/*Optional*/

select.disabled+{
++color:+graytext;
}|517133|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form+action="#"+name="my-form">
++<select+id="my-select"+name="alpha">
++++<option+value="A">A</option>
++++<option+value="B">B</option>
++++<option+value="C">C</option>
++</select>
</form>
<br/>
<button+id="toggle">toggle+enable/disable</button>|517134|517135|entityMap|0|LINK|mutability|MUTABLE|url|https://amiyasahu.github.io/make-dropdown-readonly.html^0|0|0|9|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@$D|11|E|12|1|13]]|A|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|O|3|P|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|Q|3|G|5|6|7|18|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>As @Kanishka said , if we disable a form element it will not be submitted . 
I have created a snippet for this problem . When the select element is disabled it creates a hidden input field and store the value . When it is enabled it delete the created hidden input fields . </p>

<p><a href="https://amiyasahu.github.io/make-dropdown-readonly.html" rel="nofollow noreferrer">More info</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
  var $dropDown = $('#my-select'),
    name = $dropDown.prop('name'),
    $form = $dropDown.parent('form');

  $dropDown.data('original-name', name); //store the name in the data attribute 

  $('#toggle').on('click', function(event) {
    if ($dropDown.is('.disabled')) {
      //enable it 
      $form.find('input[type="hidden"][name=' + name + ']').remove(); // remove the hidden fields if any
      $dropDown.removeClass('disabled') //remove disable class 
        .prop({
          name: name,
          disabled: false
        }); //restore the name and enable 
    } else {
      //disable it 
      var $hiddenInput = $('&lt;input/&gt;', {
        type: 'hidden',
        name: name,
        value: $dropDown.val()
      });
      $form.append($hiddenInput); //append the hidden field with same name and value from the dropdown field 
      $dropDown.addClass('disabled') //disable class
        .prop({
          'name': name + "_1",
          disabled: true
        }); //change name and disbale 
    }
  });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*Optional*/

select.disabled {
  color: graytext;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;form action="#" name="my-form"&gt;
  &lt;select id="my-select" name="alpha"&gt;
    &lt;option value="A"&gt;A&lt;/option&gt;
    &lt;option value="B"&gt;B&lt;/option&gt;
    &lt;option value="C"&gt;C&lt;/option&gt;
  &lt;/select&gt;
&lt;/form&gt;
&lt;br/&gt;
&lt;button id="toggle"&gt;toggle enable/disable&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|733554|text|您也可以禁用它，并在执行submit调用时启用它。我认为这是最简单的方法:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733555|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You could also disable it and at the moment that you make the submit call enable it. I think is the easiest way :)</p>


blocks|key|517184|text|试试这个吧..而不禁用选定的值..|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517185|$('#cf_1268591+option:not(:selected)').prop('disabled',+true);|code-block|syntax|javascript|517186|它对我很有效..|517187|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Try this one.. without disabling the selected value..</p>

<pre><code>$('#cf_1268591 option:not(:selected)').prop('disabled', true);
</code></pre>

<p>It works for me..</p>


blocks|key|517189|text|这就是您要查找的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517190|$('#cf_1268591').attr("style",+"pointer-events:+none;");|code-block|syntax|javascript|517191|就像一种护身符。|517192|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This is what you are looking for:</p>

<pre><code>$('#cf_1268591').attr("style", "pointer-events: none;");
</code></pre>

<p>Works like a charm.</p>


blocks|key|517221|text|它工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517222|$('#cf_1268591+option:not(:selected)').prop('disabled',+true);|code-block|syntax|javascript|517223|这样，我可以看到选项，但不能选择它|517224|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>It´s work very well</p>

<pre><code>$('#cf_1268591 option:not(:selected)').prop('disabled', true);
</code></pre>

<p>With this I can see the options but I can't select it</p>


blocks|key|517276|text|使用disabled设置元素不会提交数据，但是select元素没有readonly。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|517277|您可以在select上使用CSS设置样式并使用JS模拟readonly，以防止使用tab进行更改：|517278|select[readonly]+{
++background:+#eee;
++pointer-events:+none;
++touch-action:+none;
}|code-block|syntax|javascript|517279|然后像这样使用它：|517280|var+readonly_select+=+$('select');
$(readonly_select).attr('readonly',+true).attr('data-original-value',+$(readonly_select).val()).on('change',+function(i)+{
++++$(i.target).val($(this).attr('data-original-value'));
});|517281|结果：|517282|​|517283|++//+Updated+08/2018+to+prevent+changing+value+with+tab
$('a').on('click',+function()+{
var+readonly_select+=+$('select');
$(readonly_select).attr('readonly',+true).attr('data-original-value',+$(readonly_select).val()).on('change',+function(i)+{
	$(i.target).val($(this).attr('data-original-value'));
});
});|517284|select[readonly]+{
++background:+#eee;
++pointer-events:+none;
++touch-action:+none;
}|517285|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a+href="#">Click+here+to+enable+readonly</a>
<select>
<option>Example+1</option>
<option+selected>Example+2</option>
<option>Example+3</option>
</select>|517286|517287|entityMap^0|2|8|N|6|X|8|0|4|6|R|8|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1I|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1J|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|10|3|T|5|6|7|1N|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]]|12|$]]

<p>Setting an element with <code>disabled</code> will not submit the data, however <code>select</code> elements don't have <code>readonly</code>.</p>

<p>You can simulate a <code>readonly</code> on <code>select</code> using CSS for styling and JS to prevent change with tab:</p>

<pre><code>select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}
</code></pre>

<p>Then use it like:</p>

<pre><code>var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
    $(i.target).val($(this).attr('data-original-value'));
});
</code></pre>

<p>Result:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>  // Updated 08/2018 to prevent changing value with tab
$('a').on('click', function() {
var readonly_select = $('select');
$(readonly_select).attr('readonly', true).attr('data-original-value', $(readonly_select).val()).on('change', function(i) {
	$(i.target).val($(this).attr('data-original-value'));
});
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;a href="#"&gt;Click here to enable readonly&lt;/a&gt;
&lt;select&gt;
&lt;option&gt;Example 1&lt;/option&gt;
&lt;option selected&gt;Example 2&lt;/option&gt;
&lt;option&gt;Example 3&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|733737|text|也许你可以试试这种方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|733738|function+myFunction()
{
+++$("select[id%5E=myID]").attr("disabled",+true);
+++var+txtSelect+=+$("select[id%5E=myID]+option[selected]").text();
}|code-block|syntax|javascript|733739|这会将下拉列表的第一个值设置为默认值，并且它看起来是只读的|733740|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Maybe you can try this way</p>

<pre><code>function myFunction()
{
   $("select[id^=myID]").attr("disabled", true);
   var txtSelect = $("select[id^=myID] option[selected]").text();
}
</code></pre>

<p>This sets the first value of the drop-down as the default and it seems readonly</p>


blocks|key|517412|text|对我来说，最简单的选择是将select设为只读，然后添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517413|onmousedown="return+false"+onkeydown="return+false"|code-block|syntax|javascript|517414|你不需要写任何额外的逻辑。无隐藏输入或禁用，然后在表单提交时重新启用。|517415|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Easiest option for me was to make select as readonly and add: </p>

<pre><code>onmousedown="return false" onkeydown="return false"
</code></pre>

<p>You don't need to write any extra logic. No hidden inputs or disabled and then re-enabled on form submit.</p>


blocks|key|517442|text|html5支持：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517443|`
+++++$("#cCity").attr("disabled",+"disabled");+
+++++$("#cCity").addClass('not-allow');|code-block|syntax|javascript|517444|`|517445|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>html5 supporting :   </p>

<pre><code>`
     $("#cCity").attr("disabled", "disabled"); 
     $("#cCity").addClass('not-allow');
</code></pre>

<p>`</p>


blocks|key|517479|text|简单的jquery来删除未选中的选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517480|$('#your_dropdown_id+option:not(:selected)').remove();|code-block|syntax|javascript|517481|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Simple jquery to remove not selected options.</p>

<pre><code>$('#your_dropdown_id option:not(:selected)').remove();
</code></pre>


blocks|key|517537|text|以下是建议使用disabled的其他答案的细微变化。由于"disabled“属性实际上可以具有任何值并仍然禁用，因此可以将其设置为readonly，如disabled="readonly”。这将像往常一样禁用控件，并允许您轻松地使用与常规禁用控件不同的样式，使用CSS，如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|517538|select[disabled=readonly]+{
++++....+styles+you+like+for+read-only
}|code-block|syntax|javascript|517539|如果要将数据包括在提交中，请使用隐藏字段或在提交前启用，如其他答案中所述。|517540|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is a slight variation on the other answers that suggest using disabled. Since the "disabled" attribute can actually have any value and still disable, you can set it to readonly, like disabled="readonly". This will disable the control as usual, and will also allow you to easily style it differently than regular disabled controls, with CSS like:</p>

<pre><code>select[disabled=readonly] {
    .... styles you like for read-only
}
</code></pre>

<p>If you want data to be included submit, use hidden fields or enable before submit, as detailed in the other answers.</p>


<p>I am using the following statement to make it readonly but it is not working. </p>

<pre><code>$('#cf_1268591').attr("readonly", "readonly"); 
</code></pre>

<p>I don't want make it disabled, I want to make it readonly.</p>


How to make a dropdown readonly using jquery?

jQuery

我使用以下语句将其设为只读，但它不起作用。$('#cf_1268591').attr("readonly", "readonly"); 我不想禁用它，我想让它成为只读的。

问如何使用jquery使dropdown变为只读？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery使dropdown变为只读？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jquery使dropdown变为只读？
EN