jQuery-有沒有更有效的方法來做到這一點？

Question

http://jsfiddle.net/bGDME/

基本上，我只想顯示范圍中選擇的任何內容，然后隱藏其余的內容。

我的方式似乎是這樣。.我不知道。 乏味。

我希望能得到一些更好的想法。 朝着正確方向的觀點也將不勝感激。

謝謝。

Answer 1

您可以通過使用toggle()而不是if / else語句來最小化代碼

工作示例： http : //jsfiddle.net/hunter/bGDME/1/

$('#scope').change( function(){
    var type = $('option:selected', this).val();
    $('#grade').toggle(type == 2 || type == 3);
    $('#class').toggle(type == 3);
});

---

.toggle（showOrHide）

showOrHide：一個布爾值，指示是否顯示或隱藏元素。

Answer 2

那這個呢？？

  $(document).ready( function() {    
    $('#grade, #class').hide();    
    $('#scope').change( function(){    
        var type = $('option:selected', this).text();
        alert(type);      
        $('select').next().not('#'+type).hide();
        $('#'+type).show();       
    });
});

DEMO

Answer 3

對我來說，這似乎很好，除非您有很多控件或動態控件。 但是你可以使用JQuery addClass / removeClass ， switch語句，多個Selector $('#grade, #class').show(); 最小化代碼

Answer 4

您還可以使用切換狀態： http : //jsfiddle.net/bGDME/3/

Answer 5

這將滿足您的需求： http : //jsfiddle.net/bGDME/30/

只需使用val()的的scope的內eq()方法來確定哪個同級select應保持所示。 如果從第一個下拉菜單中選擇了“學校”，則都不會顯示：

$(document).ready( function() {

    var additionalSelects = $('#grade, #class');

    $('#scope').change(function(){
        var selectedVal = $(this).val();
        additionalSelects.hide();
        if(selectedVal > 1){
            additionalSelects.eq(selectedVal - 2).show();
        }
    });
});

Answer 6

這是一種使用HTML5數據屬性在選擇框上聲明性地設置“范圍級別”的方法： http : //jsfiddle.net/bGDME/6/

以及更新的JavaScript：

var $scopedSelects = $('#grade, #class').hide();
$('#scope').change( function(){
    var scopeLevel = $(this).val();
    $scopedSelects.each(function() {
        var $this = $(this);
        $this[$this.data('scope-level') <= scopeLevel ? 'show' : 'hide']();
    });
});

該代碼可能具有的主要優點是，無論您有多少“范圍選擇”，代碼都保持不變（當然，假設您更新了初始選擇器）。

Answer 7

非常簡單

$(document).ready( function() {
    $("select[id!='scope'][id!='school']").hide();
    $('#scope').change( function(){
        $("select[id!='scope']").hide();
        var ken=$(this).val();
        $("#"+ken).show();
    });
});

Answer 8

如果要通過添加更多選擇元素時不觸摸javascript來使其更具動態性，則可以對javascript代碼和HTML進行少量更改，而只需編輯HTML

使用Javascript：

$(document).ready(function() {
$('#scope').change(function() {
    var type = $(this).val().split(',');
    $('.values select').hide();
    for (x in type) {
        $('.values').find('#'+type[x]).show();
    }

});

}）;

HTML：

<select id='scope'>
<option value=''>Select</option>
<option value='school'>school</option>
<option value='school,grade'>grade</option>
<option value='school,grade,class'>class</option></select>