如何从select-list中删除/隐藏选择选项

Question

我有一个这样的选择列表:

<select id="selectlist" name="selectproduct" >
    <option value=""> --- Select product  --- </option>
    <option value="1">Product 1</option>
    <option value="2">Product 2</option>
    <option value="3">Product 3</option>
    <option value="4">Product 4</option>
</select>

不幸的是我无法编辑它.是否有任何方法可以让我隐藏"产品4"选项？我正在尝试使用CSS,但它不适用于IE.

Answer 1

要隐藏它,请使用span标记进行包装.

$( "#selectlist option[value=4]" ).wrap( "<span>" );

要显示它,请打开span标记(如果有).

if ( $( "#selectlist option[value=4]" ).parent().is( "span" ) ){
    $( "#selectlist option[value=4]" ).unwrap();
}

Answer 2

IE中不支持使用css隐藏选项,因此您需要更新options列表本身.

尝试类似的东西

$('#selectlist option[value=4]').remove();

演示:小提琴

或者如果您想稍后启用它

var sel = $('#selectlist');
var opts = sel.find('option');

$(':checkbox').click(function(){
    sel.empty().append(this.checked ? opts : opts.filter('[value!=4]'));
}).click()

演示:小提琴

Answer 3

您可以使用脚本中包含的以下行隐藏选项。

    $("#selectlist option[value='4']").hide();

如果您想再次显示此选项，请使用以下行。

   $("#selectlist option[value='4']").show();

Answer 4

尝试使用禁用属性禁用该选项。

<select id="selectlist" name="selectproduct" >
 <option value=""> --- Select product  --- </option>
 <option value="1">Product 1</option>
 <option value="2">Product 2</option>
 <option value="3">Product 3</option>
 <option value="4" disabled="disabled">Product 4</option>
</select>

检查演示