制作一个 select 框只读 - 显示内容但不能更改任何选项

Question

我有一个装满值的 select 框。如何在 jquery 中执行此条件：-

在 select 框中搜索 select 值
然后删除所有其他的，除了具有当前值的那个。

我试过以下方法，但只能添加新值。请帮忙

$('.selectBox')
    .find('option')
    .remove()
    .end()
    .append('<option value='m'>text</option>')
    .val('NEWval');

编辑我的变量中有一个 select val，我只想 select 框中的那些 select 并删除所有其他的。 我的目的实际上是让 select 框只读。当我尝试使用 'disabled' 时，它没有从中读取值 。

编辑 2

   var columns=[];
    var col=[];
    $('#' +id).find('td').each(function(index, cell){
        columns.push($(cell).text());
         col.push($(this).attr("class"));
    });

    var m = (col[2].match(/\d+/)); 
    // $('.selectBox').val(m) ; this was earlier to select the value that corresponds to "m"


 $('.selectBox option:contains(' + m + ')').show().siblings('option').hide();
 $('.selectBox').val(m);

但是 select 框中没有任何变化。

Answer 1

我猜你想要这样的东西：

var option = "ccc";

$('select option:contains(' + option + ')').show().siblings('option').hide();
$('select').val(option);

var option = "ccc";

$('select option:contains(' + option + ')').show().siblings('option').hide();
$('select').val(option);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>select...</option>
  <option>aaa</option>
  <option>bbb</option>
  <option>ccc</option>
  <option>ddd</option>
</select>

根据您的编辑 2：

$('select option[value*="' + m + '"]').show().siblings('option').hide();
$('select').val(m);

Answer 2

假设您是否从服务器端检索到值='3'-

然后在你的代码中-

    var value=3;//retrieved value

 $('.selectBox option[val="' + value + '"]')
    .prop('selected', true)
    .siblings()
    .attr('disabled',true);

这是演示-

http://jsfiddle.net/judnwcyf/6/

制作一个 select 框只读 - 显示内容但不能更改任何选项

make a select box readonly- shows the contents but not able to change any options

jquery

select

find

编辑 2