添加類到選擇標記

我正在嘗試使用JS將活動類應用於選定的選項。添加類到選擇標記

默認情況下，未選定的項目爲{display：none}。

https://jsfiddle.net/charliedemko/pLm17zmp/1/

<style> 
    .selecthidden {display:none;} 
    .selectactive {display:block !important;} 
</style> 

<script> 
    $(document).ready(function(){ 
    $('select#studioselect option').each(function(){ 
      $(this).addClass(selectactive); 
      $.not(this).removeClass(selectactive); 
    }); 
    }); 
</script> 

<select id="studioselect"> 
    <option value="select studio">Select Studio</option> 
    <option value="neutral bay">Neutral Bay</option> 
    <option value="manly">Manly</option> 
    <option value="bondi junction">Bondi Junction</option> 
    <option value="bondi beach">Bondi Beach</option> 
    <option value="south melbourne">South Melbourne</option> 
    <option value="fitzroy">Fitzroy</option> 
    <option value="north perth">North Perth</option> 
    <option value="myaree">Myaree</option> 
    <option value="wellington">Wellington</option> 
</select> 
<div style="margin-top:20px;"> 
<a id="button-neutralbay" class="qbutton selecthidden" href="#" >Neautral Bay</a> 
<a id="button-manly" class="qbutton selecthidden" href="#" >Manly</a> 
<a id="button-bondijunction" class="qbutton selecthidden" href="#" >Bondi Junction</a> 
<a id="button-bondibeach" class="qbutton selecthidden" href="#" >Bondi Beach</a> 
<a id="button-southmelbourne" class="qbutton selecthidden" href="#" >South Melbourne</a> 
<a id="button-fitzroy" class="qbutton selecthidden" href="#" >Fitzroy</a> 
<a id="button-northperth" class="qbutton selecthidden" href="#" >North Perth</a> 
<a id="button-myaree" class="qbutton selecthidden" href="#" >Myaree</a> 
<a id="button-wellington" class="qbutton selecthidden" href="#" >Wellington</a> 
</div>

所有幫助表示讚賞。

Thx。

來源

2016-01-24 Charlie De Demko

要顯示對應於所選選項的鏈接什麼下面？ – Tushar

我在這裏看不到問題。它增加了'selectactive'。 –

**缺少引號：**類名稱應該用引號括起來。 '$（this）.addClass（selectactive）;'==>'$（this）.addClass（「selectactive」）;' – Tushar

你可以嘗試，以達到你所要求的簡單的方法:)

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#studioselect').change(function(){ 
       var val = $(this).val(); 
       $('#unhide').html('<a id="button-'+val+'" class="qbutton selectactive" href="#" >'+val+'</a>'); 
      }) 
     }); 
    </script> 

    <select id="studioselect"> 
     <option value="select studio">Select Studio</option> 
     <option value="neutral bay">Neutral Bay</option> 
     <option value="manly">Manly</option> 
     <option value="bondi junction">Bondi Junction</option> 
     <option value="bondi beach">Bondi Beach</option> 
     <option value="south melbourne">South Melbourne</option> 
     <option value="fitzroy">Fitzroy</option> 
     <option value="north perth">North Perth</option> 
     <option value="myaree">Myaree</option> 
     <option value="wellington">Wellington</option> 
    </select> 
    <div id="unhide"></div>

來源

2016-01-24 08:00:55 DpEN

添加類到選擇標記

回答

相關問題