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

Question

我正在尝试创建一个表单，在选择元素'parcel'时显示一个div，但当它未被选中时，我希望隐藏该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();   
    });
});

- user2716389

Answer 1

使用以下 JQuery。演示

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

- Yasitha

Answer 2

尝试：

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/

- Ivan Chernykh

---

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

@i_like_robots 这会影响性能吗？可读性会降低吗？还是只是不流行？ - Ivan Chernykh

伪选择器的性能相当差 - 需要跳过很多障碍 - 但选择器确实是用于遍历DOM对象的，而且有特定的接口来检查表单输入值。 - i_like_robots

@i_like_robots 我同意，并且我在其他答案中看到了它们..所以我提供一些不太平凡的替代方案;) - Ivan Chernykh

以下是几个松散连接的测试用例，比较了jQuery伪选择器与替代接口：http://jsperf.com/eq-pseudo-selector-and-reduce-performance/2 http://jsperf.com/animated-pseudo-selector/3 http://jsperf.com/jquery-fastest-neq-filter - i_like_robots

@i_like_robots，感谢您告诉我$items.filter(function(i)（自定义过滤器）实际上比看起来要快。 - Ivan Chernykh

Answer 3

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

针对每个值都按照这样做 根据您的参数更改值...

- saurabh yadav

Answer 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
    });
});

- Vinay Pratap Singh Bhadauria

Answer 5

<div class="col-md-12">
    <div class="col-md-4">
      <label class="form-control" >Pay Mode</label>
         <select id="pay_mode2" class="btn-default form-control ">
            <option value="cheque">Cheque</option>
            <option value="cash" selected>Cash</option>
        </select>
    </div>
    <div class="col-md-4 cheque">
      <label class="form-control" >Cancelled</label>
         <select class="btn-default form-control ">
            <option value="no">No</option>
            <option value="yes">Yes</option>
        </select>
    </div>
    <div class="col-md-4 cheque">
      <label class="form-control" >Instrument No</label>
        <input type="text" class="form-control" name="">
    </div>
</div>


<script>
  $('#pay_mode2').change(function(){
  var myID = $(this).val();
 if(myID == 'cheque')
 {
  $('.cheque').each(function(){
      $(this).show();
  });
 }else{
  $('.cheque').each(function(){
      $(this).hide();
  });
 }
});

</script>

- pranay_lamse

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 6

尝试使用以下JS代码

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

- Saranya Sadhasivam

Answer 7

试试这个：

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

- Cthulhu

Answer 8

试试这个：

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

演示 这里

- Sergio

Answer 9

虽然没有什么新鲜的，但缓存您的jQuery集合将会带来一些小的性能提升。

$(function() {

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

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

而且使用原生JS可以获得超快的速度：

(function() {

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

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

});

- i_like_robots

Answer 10

我使用了以下基于jQuery的代码片段，使一个元素显示一个元素，该元素具有与元素的value属性匹配的id属性，同时隐藏不匹配的元素。不确定这是否是最好的方法，但这是一种方法。 $('#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>

- mycotn