首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery选择更改显示/隐藏div事件

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

Stack Overflow用户
提问于 2013-09-02 19:39:10
回答 9查看 140.8K关注 0票数 11

我正在尝试创建一个表单,当选择元素'parcel‘被选中时,它将显示一个div,但当它未被选中时,我想隐藏div。这是我目前的标记:

到目前为止,这是我的HTML。

代码语言:javascript
复制
    <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。

代码语言:javascript
复制
  $(function() {
    $('#type').change(function(){
        $('#row_dim').hide(); 
        $("select[@name='parcel']:checked").val() == 'parcel').show();   
    });
});
EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2013-09-02 19:49:22

使用下面的JQuery。Demo

代码语言:javascript
复制
$(function() {
    $('#row_dim').hide(); 
    $('#type').change(function(){
        if($('#type').val() == 'parcel') {
            $('#row_dim').show(); 
        } else {
            $('#row_dim').hide(); 
        } 
    });
});
票数 44
EN

Stack Overflow用户

发布于 2013-09-02 19:43:10

尝试:

代码语言:javascript
复制
if($("option[value='parcel']").is(":checked"))
   $('#row_dim').show();

或者甚至是:

代码语言:javascript
复制
$(function() {
    $('#type').change(function(){
        $('#row_dim')[ ($("option[value='parcel']").is(":checked"))? "show" : "hide" ]();  
    });
});

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

票数 3
EN

Stack Overflow用户

发布于 2013-09-02 19:44:05

将jquery方法更改为

代码语言:javascript
复制
$(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
    });
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18572401

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档