Javascript jQuery-有没有更有效的方法来实现这一点？

基本上，我只想显示范围中选择的内容，而隐藏其余内容

我做这件事的方式似乎如此。。我不知道。单调乏味

我希望能得到一些使它更好的想法。在正确的方向上提出一点也将非常感激

---

谢谢。

您可以使用toggle而不是if/else语句来最小化代码

工作示例：

showOrHide：一个布尔值，指示是显示还是隐藏元素

---

您可以使用toggle而不是if/else语句来最小化代码

工作示例：

showOrHide：一个布尔值，指示是显示还是隐藏元素

这个怎么样

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

这个怎么样

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

---

这对我来说很好，除非你有很多或动态的控件。但是，您可以使用jqueryaddclass/removeClass、switch语句、多选择器$'grade，class'。show；要最小化代码，我觉得这很好，除非您有很多控件或动态控件。但是，您可以使用jqueryaddclass/removeClass、switch语句、多选择器$'grade，class'。show；要最小化代码，您还可以使用开关状态：

您还可以使用开关状态：

这将满足您的要求：

您只需在eq方法中使用作用域的val来确定应保持显示哪个同级选择。如果从第一个下拉列表中选择“学校”，则两者都不会显示：

$(document).ready( function() {

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

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

---

这将满足您的需求：

您只需在eq方法中使用作用域的val来确定应保持显示哪个同级选择。如果从第一个下拉列表中选择“学校”，则两者都不会显示：

$(document).ready( function() {

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

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

---

下面是一种使用HTML5数据属性在选择框上声明性设置范围级别的方法：

以及更新的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']();
    });
});

---

这一方法的主要优点是，无论有多少范围选择，代码都保持不变，当然，假设您更新了初始选择器。

下面是一种使用HTML5数据属性在选择框上声明设置范围级别的方法：

以及更新的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']();
    });
});

这个选项的主要优点是，不管有多少范围选择，代码都保持不变，当然，假设您更新了初始选择器。

非常简单

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

很简单,

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

---

如果您想在添加更多select元素时不接触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元素时不接触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:

---

为什么不添加一个类来隐藏不在您范围内的元素？为什么不添加一个类来隐藏不在您范围内的元素？不是这样，因为我不想在选择年级时隐藏学校选择框。等等，不是真的，因为我不想在选择年级时隐藏学校选择框。等等，很好。简单干净。我喜欢，很好。简单干净。我喜欢。