隱藏選擇選項並在點擊定義的選項後顯示它們

這是我的示例。隱藏選擇選項並在點擊定義的選項後顯示它們

<select name="mydropdownbox"> 
<option value="val1">val1</option> 
<option value="val2">val2</option> 
<option value="val3">val3</option> 
<option value="val4">val4</option> 
<option value="val5">val5</option> 
<option value="val6">val6</option> 
</select>

正如你所看到的，我們有一個選擇框有不同的選項。我想要做的是隱藏val2和val5選項，但在列表末尾添加另一個選項，如<option value="more">more</option>。

通過點擊「更多」應顯示隱藏的選項。選項「更多」應該用選項「更少」來代替。通過點擊更少的選項應該再次隱藏。

請記住，這只是一個例子。完整列表包含超過50個選項。對某種陣列有用嗎？

不幸的是，我不知道如何開始。任何幫助，將不勝感激。謝謝。

UPDATE 請看看我的JS-部分http://jsfiddle.net/bqyBQ/5/

來源

2012-08-23 user1437032

我相信要「隱藏」選項元素，您需要實際刪除它們，因爲某些瀏覽器不允許您通過CSS隱藏它們。 – nnnnnn

嗯，所以沒有辦法再次顯示他們？ – user1437032

選擇元素可能沒有那麼靈活，您可能需要考慮一個複選框列表並添加一些js和css，以允許簡單的選擇和可視指示選擇什麼 – hsalama

我會嘗試這樣的事情

<select id="mydropdownbox" name="mydropdownbox"> 
    <option value="val1">val1</option> 
    <option value="val2">val2</option> 
    <option value="val3">val3</option> 
    <option value="val4" class="hide">val4</option> 
    <option value="val5" class="hide">val5</option> 
    <option value="val6" class="hide">val6</option> 
    <option value="more" class="more">more</option> 
</select> 

<style type="text/css"> 
    .hide { display: none; } 
</style> 

<script type="text/javascript"> 
    jQuery('#mydropdownbox .more').click(function() { 
    jQuery('#mydropdownbox .hide').attr('class', 'show'); 
    }); 
</script>

只需爲這些元素添加一個新類，這些元素應該默認隱藏。然後將點擊事件添加到更多鏈接以切換這些類。使用這種技術也可以輕鬆製作更少的按鈕。

來源

2012-08-23 13:33:51 apparat

評論請在「更多」選項的鏈接。更多選項點擊應該調用JavaScript或jQuery和從腳本動態添加數據和切換多與少，以及添加和刪除操作的標題

來源

2012-08-23 13:22:20 Aravind

我是javascript的新手。你有沒有例子？ – user1437032

隱藏選擇選項並在點擊定義的選項後顯示它們

回答

相關問題