隐藏/显示jquery中的选择框选项？

我有下面的代码片段在某些按钮的点击JSP隐藏/显示jquery中的选择框选项？

<HTML> 
<BODY> 
    <select id="customerIds" onchange="doOperation()"> 
       <option value="default"> Start..</option> 
        <div id="action1" class="action1"> 
        <option value="1"> 1</option> 
        <option value="2"> 2</option> 
        <option value="3"> 3 </option> 
        </div> 
        <div id="action2" class="action2"> 
        <option value="4"> 4 </option> 
        </div> 
        <option value="5"> 5 </option> 
       </select> 
</BODY> 
</HTML>

，我想隐藏与ID为“动作1”的选项，并显示与标识的选项为“动作2”。所以我试过这个

$('#action1').hide(); 
    $('#action2').show();

但是，没有工作。没有得到什么问题？在firebug中，当我试图检查选择框时，我没有找到任何div标签（即与id action1/action2）以上的选项。

来源

2013-01-03 emilly

您不能在'select'和'option'标签内写入'div'标签。 –

您可能想要使用span标签，而不是该标签内联。 –

使用。这将在工作在跨浏览器。

function showHideSelectOptions(showOptionsClass) { 
    var optionsSelect = $('#selectId'); 
    optionsSelect.find('option').map(function() { 
     return $(this).parent('span').length == 0 ? this : null; 
    }).wrap('<span>').attr('selected', false).hide(); 

    optionsSelect.find('option.' + showOptionsClass).unwrap().show() 
     .first().attr('selected', 'selected'); 
    }

来源

2013-01-04 11:47:13

@M Sach：我试图将您的解决方案应用于我的问题（http ：//stackoverflow.com/questions/20381003/jquery-and-css-hide-show-select-options-with-a-certain-css-class）。它不适用于IE 10和Chrome，同时在Firefox上它只在刷新页面时才有效，并且我可以在第一时间看到所有选项。我将只有“选择...”选项，并且当用户从第一个选择中选择一个值时，只显示相应的选项并选择“选择...”选项 – Sefran2

你不能在div中分组选项。你可以将它们分组在< optgroup>，但我不认为这就是你的目标。

你应该做的是，或者创建两个下拉菜单，您可以在两个下拉菜单之间切换或保留一个下拉菜单并重新填充其选项。

来源

2013-01-03 06:37:46

您不能使用div进行分组，但您可以将class分配到options以对它们进行分组。

Live Demo

<select id="customerIds" onchange="doOperation()"> 
     <option value="default"> Start..</option>    
     <option value="1" class="action1"> 1</option> 
     <option value="2" class="action1"> 2</option> 
     <option value="3" class="action1"> 3 </option> 
     <option value="4" class="action2"> 4 </option> 
     <option value="5" class="action3"> 5 </option> 
</select> 

$('.action1').hide(); 
$('.action2').show();

来源

2013-01-03 06:38:53 Adil

似乎并没有将它们隐藏在我的机器上（os x/chrome 23）？ – kieran

呵呵，隐藏选项不是跨浏览器（[每天学点东西]）（http://stackoverflow.com/questions/1271503/hide-options-in-a-select-list-using-jquery）） – kieran

@基兰这似乎是真的。它在Firefox上工作，但不在IE 8 – emilly

您可能没有一个<select>内<div>元素，例如参见this stackoverflow on the topic，它引用HTML规范的this bit。另外，隐藏选项并不是跨浏览器兼容的（参见this stackoverflow (second answer))，正如@Voitek Zylinski所言，你最好保留选择的多个副本并在它们之间切换，或者如果保持id属性是必需的，那么。甚至调整的innerHTML（呸......）

也许你可以接近它想：

标记

<select onchange="doOperation()" class="js-opt-a"> 
     <option value="default"> Start..</option> 
      <option value="1"> 1</option> 
      <option value="2"> 2</option> 
      <option value="3"> 3 </option> 
</select> 
<select onchange="doOperation()" class="js-opt-b"> 
    <option value="default">Start...</option> 
    <option value="4"> 4 </option> 
    <option value="5"> 5 </option> 
</select>

个JS

function doOperation() { /*whatever*/} 
$(".js-opt-a").hide(); 
$(".js-opt-b").show();

见例如this jsfiddle

不够完美，但！

来源

2013-01-03 06:52:21 kieran

你可以试试这个代码：javascript函数，其中showOptionsClass是给你要显示的每个选项下面的类

<!DOCTYPE html> 
<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("#hide").click(function(){ 
    $('.action1').wrap('<span></span>').hide(); 
    }); 
    $("#show").click(function(){ 
    $('.action1').unwrap('<span></span>').show(); 
    }); 
}); 
</script> 
</head> 
<body> 
<select id="customerIds" onchange="doOperation()"> 
      <option value="default"> Start..</option>    
      <option value="1" class="action1"> 1</option> 
      <option value="2" class="action1"> 2</option> 
      <option value="3" class="action1"> 3 </option> 
      <option value="4" class="action2"> 4 </option> 
      <option value="5" class="action3"> 5 </option> 
    </select> 
<button id="hide">Hide</button> 
<button id="show">Show</button> 
</body> 
</html>

来源

2013-01-03 07:23:50

jQuery.unwrap（）不接受任何参数，请参阅http://api.jquery.com/unwrap/ –

隐藏/显示jquery中的选择框选项？

回答

相关问题