选择“选项”分区隐藏使用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/