jQuery根据选择值显示/隐藏div [英] jQuery show/hide a div based on select value

问题描述

我有一个值为"all"和"custom"的选择列表.选择值为"custom"的select时，应显示一个类为"resources"的div，如果值为"all"，则应将其隐藏.

I have a select list with values 'all' and 'custom'. On select with value 'custom' a div with class 'resources' should appear, and if the value is 'all' it should be hidden.

表格为:

<div>
    <label>Privileges:</label>
    <select name="privileges" id="privileges" class="" onclick="craateUserJsObject.ShowPrivileges();">
        <option id="all" value="all">All</option>
        <option id="custom" value="custom">Custom</option>
    </select>
</div>
<div class="resources" style=" display: none;">resources</div>

与此相关的javascript是:

And javascript for this is:

ShowPrivileges: function() {
    var Privileges = jQuery('#privileges');
    var select = this.value;
    Privileges.change(function() {
        if (select === 'custom') {
            $('.resources').show();
        }
    });
}

看起来应该如何工作?抱歉，我知道这应该很简单，但是我对这一切还是陌生的.

How should this look in order to work? Sorry, I know this should be simple, but I am new with all this.

推荐答案

您需要使用val方法:

You need to use val method:

var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function () {
    if ($(this).val() == 'custom') {
        $('.resources').show();
    }
    else $('.resources').hide(); // hide div if value is not "custom"
});

http://jsfiddle.net/RWUdb/

这篇关于jQuery根据选择值显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！