選擇「選項」分區隱藏使用JQuery

Question

我試圖創建時，有人選擇選擇元件上的一定的「選項」自動隱藏/顯示功能/顯示。下面是我對「選擇」：

<li id="foli16" class="name notranslate"> 
        <label class="desc" id="title16" for="Field16"> 
         Repeat Pattern 
         <span id="req_16" class="req"></span> 
        </label> 
        <span class="left"> 
         <select id="Field16" style="margin-left: 0px;" name="" class="field select"> 
          <option value="" <?php echo $doc_selected; ?>>None</option> 
          <option value="" <?php echo $doc_selected; ?>>Daily</option> 
          <option value="" <?php echo $doc_selected; ?>>Weekly</option> 
          <option value="" <?php echo $doc_selected; ?>>Monthly</option> 
          <option value="" <?php echo $doc_selected; ?>>Yearly</option> 
         </select> 
        </span> 
        <p class="instruct" id="instruct16"><small>How often does this test occur?</small></p> 
       </li> 

當有人選擇了「每天」選項，我想用「日報」的ID來顯示DIV。如果他們選擇不同的，它需要關閉可見之一，顯示新的選擇。

我與點擊按鈕和單肘這樣做過，但我不確定該怎麼寫了這麼大的切換，尤其是使用選擇「選項」。我假設我的選項也需要ID。

Answer 1

你有5組選項的元素，如果有應該被隱藏/根據所選的選項5個所示的目標元素，你可以添加一個類你的目標元素，並且使用eq和index方法：

var $targets = $('.theTargets'); 

$('#Field16').change(function(){ 
    var i = $('option:selected', this).index(); 
    $targets.hide().eq(i).show(); 
}); 

如果您希望通過ID來選擇目標元素：

從tymeJV的回答

$(function(){ 
    var $targets = $('.theTargets'); // If they have a common class name 

    $('#Field16').change(function(){ 
     var id = this.value.toLowerCase(); 
     $targets.hide().filter('#' + id).show(); 
    }) 
}) 

Answer 2

您可以使用更改功能選擇欄，並獲取所選擇的選項的ID。

<script> 
    $(document).ready(function() { 

     //This will fire when an option is selected from <select> 
     $("#Field16").change(function() { 
      //Add a class to all div's so you can hide previous ones 
      $(".whateveryourclassis").hide(); 

      //Get the ID of the selected option 
      var selectedID = $(this).attr("id") + "div"; 

      //Show the right div. (assuming the div you want has the same ID as option 
      //with "div" after it 
      $("#" + selectedID).show(); 
     } 

    } 
</script> 

Answer 3

你可以做這樣的事情：

$('select').on('change', function() { 
    $('li').hide() 
    $('#' + this.value).show(); 
}); 

Answer 4

大廈

我會給每個所示的類名稱，如showhide將被隱藏的div /，那麼

$("#Field16").change(function() { 
    //Get the ID of the desired div 
    var selectedID = $(this).val(); 

    $(".showhide").hide(); 
    $("#" + selectedID).show(); 
} 

Answer 5

你可以嘗試這樣的事情。

您可以選擇綁定到onchange事件和搶一樣的價值。

$('#Field16').bind('change',function(){ 
    $('.box').hide(); // All the elements you want to hide on change. 
    $('#'+$(this).val()).show(); 
}); 

http://jsfiddle.net/XKLx8/

Answer 6

你想要什麼：

HTML

<select id="Field16" style="margin-left: 0px;" name="" class="field select"> 
          <option value="">None</option> 
          <option value="">Daily</option> 
          <option value="">Weekly</option> 
          <option value="">Monthly</option> 
          <option value="">Yearly</option> 
         </select> 
<div id="none">I am None</div> 
<div id="daily">I am Daily</div> 
<div id="monthly">I am Monthly</div> 
<div id="weekly">I am Weekly</div> 
<div id="yearly">I am Yearly</div> 

jQuery的

jQuery(document).ready(function($){ 
    hide_all(); 
    function hide_all(){ 
    $("#Field16 option").each(function(){ 
     var ids=$(this).text().toLowerCase(); 
     $('#'+ids).hide(); 
    }); 
    } 
    $("#Field16").change(function(){ 
     hide_all(); 
     var val=$('option:selected',this).text().toLowerCase(); 
     $('#'+val).show(); 
    }); 

}); 

這裏是演示：http://jsfiddle.net/8wKzQ/