Question

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

表格是：

<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就是：

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

为了工作，这应该怎么样？对不起，我知道这应该很简单，但我是新手。

Answer 1

您需要使用val方法：

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/

Answer 2

Privileges.on('change',function(){
    if($(this).val()=='custom'){
        $('.resources').show();
    }else{
        $('.resources').hide();
    }
})

Answer 3

您需要添加事件处理程序：

$("#privileges").change(craateUserJsObject.ShowPrivileges);

然后，在你的ShowPrivileges功能中：

var val = $("#privileges").val();
if(val == "whatever")
    //do something
else
    //do something

Answer 4

  $("#privileges").change(function(){
     var select=  $(this).val();
       if(select=='custom'){
          //some code
         }
    });

或

var select=$('#privileges :selected').val() if(select=='custom'){ //some code }

Answer 5

你这太复杂了：

首先，删除内联onclick。由于您使用的是jQuery，请动态附加您的处理程序。

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

其次，不要监听点击，然后附加change处理程序。直接附上

<script>
jQuery('#privileges').on('change',function(){
    if(jQuery(this).val()=='custom'){
        jQuery('.resources').show();
    } else {
        jQuery('.resources').hide();
    }
});
</script>

Answer 6

您可以通过删除onClick并从选项中删除ID来清理HTML。

HTML：

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

你的JavaScript可以做到这一点：

$('#privileges').on('change', function() {
        if($(this).val() === 'all') {
            $('.resources').hide();
        } else {
            $('.resources').show();
        }
 });

Answer 7

那可以通过`toggle（）`作为速记来完成：

def substrings(input_str):
    for i in range(len(input_str)):
        yield input_str[:i]

# Then iterate through the function like so

function = substrings()
for i in function:
    print(i)

如果您要切换页面加载中的显示，则可以触发相同的$('#privileges').change(function() { $('.resources').toggle($(this).val() == 'custom'); });事件，例如：

change()

$('#privileges').change(function() {
  $('.resources').toggle($(this).val() == 'custom');
}).change();

$('#privileges').change(function() {
  $('.resources').toggle($(this).val() == 'custom');
});

jQuery根据选择值显示/隐藏div

7 个答案:

那可以通过`toggle（）`作为速记来完成：