隱藏/顯示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中的選擇框選項？

回答

相關問題