jquery show hide基於選擇值的div

我有一個vales'all'和'custom'的選擇列表。在選擇「自定義」值時，應該顯示具有類「資源」的div，如果值爲「全部」，則應該隱藏它。jquery show hide基於選擇值的div

形式爲：

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

應該如何這一下爲了工作？對不起，我知道這應該很簡單，但我是新的。

來源

2013-03-26 Dušan

是craateUserJsObject ...拼寫是否正確？或者它應該是createUserJsObject？ – 2013-03-26 19:24:02

謝謝大家。 @dfsq的迴應完美運作。 – 2013-03-26 19:34:18

您需要使用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/

來源

2013-03-26 19:27:31 dfsq

謝謝，這個作品完美。 – 2013-03-26 19:30:38

你爲什麼需要第二行？該變量從不使用 – reggaeguitar 2015-05-22 20:33:27

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

來源

2013-03-26 19:25:05

嗨，謝謝，這可以顯示，但它不隱藏div如果選擇'全部'值 – 2013-03-26 19:29:05

如果（$（this）.val（）=='custom'）{ $（'。resources'）。顯示（）; } else { $（'。resources'）。hide（）; } – 2013-03-26 19:30:00

您將要添加的事件處理程序：

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

然後，你ShowPrivileges功能可按內：

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

來源

2013-03-26 19:27:01 TNCodeMonkey

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

或

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

來源

2013-03-26 19:27:24 sasi

您正在這個太複雜了：

首先，刪除內嵌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>

來源

2013-03-26 19:28:06 Steve

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

來源

2013-03-26 19:30:39 c0deNinja

jquery show hide基於選擇值的div

回答

相關問題