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的{{1}}来确定哪个兄弟eq()应该继续显示。如果从第一个下拉列表中选择“学校”，则不会显示：

select

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>

jQuery - 有更有效的方法吗？

8 个答案: