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

【问题标题】：jQuery show/hide a div based on select valuejQuery 根据选择值显示/隐藏 div
【发布时间】：2013-03-26 19:22:15
【问题描述】：

我有一个包含值“全部”和“自定义”的选择列表。在选择值为 'custom' 时，应显示一个具有类 'resources' 的 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();
        }
    });
}

这应该如何工作？抱歉，我知道这应该很简单，但我对这一切都很陌生。

【问题讨论】：

是 crateUserJsObject... 拼写正确吗？还是应该是 createUserJsObject ？
谢谢大家。 @dfsq 的响应效果很好。

标签： javascript jquery

【解决方案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/

【讨论】：

为什么需要第二行？该变量从未使用过

【解决方案2】：

您可以通过删除 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();
        }
 });

【讨论】：

【解决方案3】：

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

【讨论】：

嗨，谢谢，这可以显示，但如果选择了“all”值，它不会隐藏 div
if($(this).val()=='custom'){ $('.resources').show(); }else{ $('.resources').hide(); }

【解决方案4】：

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

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

然后，在您的 ShowPrivileges 功能中：

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

【讨论】：

【解决方案5】：

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

或

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

【讨论】：

【解决方案6】：

你把事情弄得太复杂了：

首先，删除内联 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>

【讨论】：

【解决方案7】：

这可以使用 `toggle()` 作为简写：

$('#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');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：