如何使用jquery只读取下拉列表？

Question

我使用以下语句使其只读,但它不起作用.

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

我不想让它禁用,我想让它只读.

Answer 1

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

下拉始终是只读的.你能做的就是禁用它

如果使用表单,则禁用的字段不会提交,因此使用隐藏字段存储禁用的下拉列表值

Answer 2

我有同样的问题,我的解决方案是禁用未选中的所有选项.使用jQuery很容易:

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

Answer 3

尝试这一个...而不禁用所选的值..

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

这个对我有用..

Answer 4

这就是你要找的东西:

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

奇迹般有效.

Answer 5

设置元素disabled不会提交数据,但select元素不具备readonly.

你可以模拟readonly在select使用CSS样式和JS以防止标签的变化:

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

然后使用它像:

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

结果:

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

Answer 6

我会禁用该字段.然后,当表单提交时,使其不被禁用.在我看来,这比处理隐藏字段更容易.

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

Answer 7

为了简化这里的事情,这是一个jQuery插件,没有麻烦这样做:https://github.com/haggen/readonly

Answer 8

简单的jQuery删除未选中的选项。

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