jQuery 如何使用jquery使下拉菜单只读？

How to make a dropdown readonly using jquery?

提问by Karim Ali

I am using the following statement to make it readonly but it is not working.

我正在使用以下语句使其只读，但它不起作用。

$('#cf_1268591').attr("readonly", "readonly"); 

I don't want make it disabled, I want to make it readonly.

我不想让它被禁用，我想让它只读。

回答by Kanishka Panamaldeniya

$('#cf_1268591').attr("disabled", true); 

drop down is always read only . what you can do is make it disabled

下拉始终是只读的。你可以做的是禁用它

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

如果您使用表单，则禁用字段不会提交，因此请使用隐藏字段来存储禁用下拉值

回答by Bertrand D.

I had the same problem, my solution was to disable all options not selected. Very easy with jQuery:

我遇到了同样的问题，我的解决方案是禁用所有未选中的选项。使用 jQuery 非常简单：

$('option:not(:selected)').attr('disabled', true);

Edit =>If you have multiple dropdowns on same page, disable all not selected options on select-ID as below.

编辑 =>如果您在同一页面上有多个下拉菜单，请禁用 select-ID 上的所有未选中选项，如下所示。

$('#select_field_id option:not(:selected)').attr('disabled', true);

回答by Prabhagaran

Try this one.. without disabling the selected value..

试试这个.. 不禁用选定的值..

$('#cf_1268591 option:not(:selected)').prop('disabled', true);

It works for me..

这个对我有用..

回答by mainak chakraborty

This is what you are looking for:

这就是你要找的：

$('#cf_1268591').attr("style", "pointer-events: none;");

Works like a charm.

奇迹般有效。

回答by Lucas Bustamante

Setting an element with disabledwill not submit the data, however selectelements don't have readonly.

设置元素 withdisabled不会提交数据，但是select元素没有readonly.

You can simulate a readonlyon selectusing CSS for styling and JS to prevent change with tab:

你可以模拟readonly在select使用CSS样式和JS防止改变与标签：

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

Then use it like:

然后像这样使用它：

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'));
});

Result:

结果：

  // 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'));
});
});

select[readonly] {
  background: #eee;
  pointer-events: none;
  touch-action: none;
}

<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>

回答by NL3294

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.

我会禁用该字段。然后，当表单提交时，使其不被禁用。在我看来，这比处理隐藏字段要容易得多。

//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 );
});     

回答by abhi chavda

Simple jquery to remove not selected options.

简单的 jquery 删除未选择的选项。

$('#your_dropdown_id option:not(:selected)').remove();

回答by Arthur Corenzan

To simplify things here's a jQuery plugin that does that without the hassle: https://github.com/haggen/readonly

为了简化事情，这里有一个 jQuery 插件，它可以轻松完成：https: //github.com/haggen/readonly

回答by admirhodzic

This line makes selects with the readonlyattribute read-only:

这一行使用readonly只读属性进行选择：

$('select[readonly=readonly] option:not(:selected)').prop('disabled', true);

回答by Homer

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.

此代码将首先在每个下拉列表中存储原始选择。然后，如果用户更改选择，它会将下拉列表重置为其原始选择。

http://jsfiddle.net/4aHcD/22/

http://jsfiddle.net/4aHcD/22/

//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);
});