jQuery 选择更改显示/隐藏 div 事件

Posted 2023-02-21

【中文标题】jQuery 选择更改显示/隐藏 div 事件

【英文标题】：jQuery select change show/hide div event

【发布时间】：2013-09-05 12:20:53

【问题描述】：

I am trying to create a form which when the select element 'parcel' is selected it will show a div but when it is not selected I would like to hide the div.这是我目前的标记：

到目前为止，这是我的 html..

    <div class="row">    
    Type
        <select name="type" id="type" style="margin-left:57px; width:153px;">
                <option ame="l_letter" value="l_letter">Large Letter</option>
                <option name="letter" value="letter">Letter</option>
                <option name="parcel" value="parcel">Parcel</option>
        </select>                    
</div>

<div class="row" id="row_dim">
    Dimensions
        <input type="text" name="length" style="margin-left:12px;" class="dimension" placeholder="Length">
        <input type="text" name="width" class="dimension" placeholder="Width">
        <input type="text" name="height" class="dimension" placeholder="Height">
</div> 

到目前为止，这是我的 jQuery..

  $(function() 
    $('#type').change(function()
        $('#row_dim').hide(); 
        $("select[@name='parcel']:checked").val() == 'parcel').show();   
    );
);

【参考方案1】：

试试：

if($("option[value='parcel']").is(":checked"))
   $('#row_dim').show();

甚至：

$(function() 
    $('#type').change(function()
        $('#row_dim')[ ($("option[value='parcel']").is(":checked"))? "show" : "hide" ]();  
    );
);

JSFiddle：http://jsfiddle.net/3w5kD/

【讨论】：

jQuery 伪选择器不是检查表单值的合适接口。

@i_like_robots 对性能不利吗？可读性差吗？或者只是不时尚？

伪选择器的性能很差——要跳过很多圈——但是选择器实际上是用来遍历 DOM 对象的，并且有特定的接口来检查表单输入值。

@i_like_robots 我同意，我在其他答案中看到了所有这些......所以我给出了一些不重要的替代方案；）

这里有一些松散连接的测试用例比较 jQuery 伪选择器和替代接口：jsperf.com/eq-pseudo-selector-and-reduce-performance/2jsperf.com/animated-pseudo-selector/3jsperf.com/jquery-fastest-neq-filter

【参考方案2】：

试试下面的 JS

$(function() 
    $('#type').change(function()
        $('#row_dim').hide(); 
        if ($(this).val() == 'parcel')
        
             $('#row_dim').show();
        
    );
);

【参考方案3】：

试试这个：

$(function() 
    $("#type").change(function() 
        if ($(this).val() === 'parcel') $("#row_dim").show();
        else $("#row_dim").hide();
    

【参考方案4】：

将您的 jquery 方法更改为

$(function ()  /* DOM ready */
    $("#type").change(function () 
        alert('The option with value ' + $(this).val());
        //hide the element you want to hide here with
        //("id").attr("display","block"); // to show
        //("id").attr("display","none"); // to hide
    );
);

【参考方案5】：

试试这个：

 $(function () 
     $('#row_dim').hide(); // this line you can avoid by adding #row_dimdisplay:none; in your CSS
     $('#type').change(function () 
         $('#row_dim').hide();
         if (this.options[this.selectedIndex].value == 'parcel') 
             $('#row_dim').show();
         
     );
 );

演示here

【参考方案6】：

使用以下 JQuery。 Demo

$(function() 
    $('#row_dim').hide(); 
    $('#type').change(function()
        if($('#type').val() == 'parcel') 
            $('#row_dim').show(); 
         else 
            $('#row_dim').hide(); 
         
    );
);

【参考方案7】：

除了缓存你的 jQuery 集合之外没有什么新的东西会带来小的性能提升

$(function() 

    var $typeSelector = $('#type');
    var $toggleArea = $('#row_dim');

    $typeSelector.change(function()
        if ($typeSelector.val() === 'parcel') 
            $toggleArea.show(); 
        
        else 
            $toggleArea.hide(); 
        
    );
);

在 vanilla JS 中实现超高速：

(function() 

    var typeSelector = document.getElementById('type');
    var toggleArea = document.getElementById('row_dim');

    typeSelector.onchange = function() 
        toggleArea.style.display = typeSelector.value === 'parcel'
            ? 'block'
            : 'none';
    ;

);

【参考方案8】：

<script>  
$(document).ready(function()
    $('#colorselector').on('change', function() 
      if ( this.value == 'red')
      
        $("#divid").show();
      
      else
      
        $("#divid").hide();
      
    );
);
</script>

对每个值都这样做 还可以根据您的参数更改值...

【参考方案9】：

我使用以下基于 jQuery 的 sn-p 来让 select-element 显示一个 div-element，它有一个 id 与 option-element 的 value 匹配，同时隐藏divs 不匹配。不确定这是不是最好的方法，但它是一种方法。

$('#sectionChooser').change(function()
    var myID = $(this).val();
    $('.panel').each(function()
        myID === $(this).attr('id') ? $(this).show() : $(this).hide();
    );
);

.panel display: none;
#one display: block;

<select id="sectionChooser">
    <option value="one" selected>Thing One</option>
    <option value="two">Thing Two</option>
    <option value="three">Thing Three</option>
</select>

<div class="panel" id="one">
    <p>Thing One</p>
</div>
<div class="panel" id="two">
    <p>Thing Two</p>
</div>
<div class="panel" id="three">
    <p>Thing Three</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>