jquery show hide div基于选择值 [英] jquery show hide div based on select value

问题描述

我有一个名为'all'和'custom'的选择列表。在选择值'custom'时，应显示带有资源类的div，如果值为all则应隐藏。

I have a select list with vales 'all' and 'custom'. On select with value 'custom' a div with class 'resources' should appear, and if 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 show hide div基于选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！