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

时间:2013-07-15 10:57:43

标签: javascript select hide option

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

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

11 个答案:

答案 0 :(得分:9)

要隐藏它,请用span标记包装它。

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

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

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

答案 1 :(得分:5)

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

尝试类似

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

演示:Fiddle

或者如果您想稍后启用它

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

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

演示:Fiddle

答案 2 :(得分:2)

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

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

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

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

答案 3 :(得分:1)

您可以通过将选项移动到隐藏的选择元素或缓存的文档片段来“隐藏”该选项,然后在您想要显示它时将其移回:

var selectTool = (function() {
  var frag = document.createDocumentFragment();
  return {
    hideOpt: function (selectId, optIndex) {
      var sel = document.getElementById(selectId);
      var opt = sel && sel[optIndex];
      console.log(opt);

      if (opt) {
        frag.appendChild(opt);
      }
    },

    showOpt: function (selectId) {
      var sel = document.getElementById(selectId);
      var opt = frag.firstChild;
      if (sel && opt) {
        sel.appendChild(opt);
      }
    }
  }
}());

然后你可以隐藏第四个选项,如:

<input type="button" value="Hide option" onclick="
  selectTool.hideOpt('selectlist',4);
">

并使用以下内容再次显示:

<input type="button" value="Show option" onclick="
  selectTool.showOpt('selectlist');
">

当然所有的游戏代码,但你应该得到一些想法。如果你想存储很多选项,你需要一种引用它们的方法,所以可以将它们存储在具有某种形式的引用方案的对象中。

答案 4 :(得分:1)

为节省时间,请阅读以下答案。

好的,我搜索了几个小时,我注意到没有工作方式到&#34;隐藏&#34; (对于所有浏览器,我的意思是使选项暂时从下拉列表中消失),例如将可见性设置为隐藏或样式=&#34; display:none&#34;。

我最后的方法是:  1.创建一个数组以存储下拉列表的所有选项。  2.使用方法根据要显示的内容动态更新下拉列表。

如果您想在不使用任何库的情况下使用下拉列表

,那就是它

答案 5 :(得分:0)

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

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

检查demo

答案 6 :(得分:0)

请参阅此链接

http://jsfiddle.net/DKKMN/

<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" id="i">Product 4</option>
</select>


#i{display:none;}

创建一个id并以风格使其成为隐形

答案 7 :(得分:0)

我想你也在使用JQuery。

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

答案 8 :(得分:0)

使用java脚本将子项追加到选项列表下面。

`var option = document.createElement("option");
 option.text = "All Users";
 option.value = "all_user";
 var select = document.getElementById("log_user_type");
 select.appendChild(option);`

答案 9 :(得分:0)

如果要从选择列表中删除某些选项,可以使用以下代码:

<script type="text/javascript">
    $(window).bind("load", function() {    
        $('#select_list_id option[value="AB"],option[value="SK"]').remove();
    });
</script>

答案 10 :(得分:-3)

<option value="4" style="display:none">Product 4</option> 

默认隐藏第4个选项。