jQuery-有没有更有效的方法来做到这一点？

Question

http://jsfiddle.net/bGDME/

Basically, I want to show only whatever is selected in the scope and hide the rest.

The way I did it seems so.. I don't know. Tedious.

I was hoping to get some ideas of making it better. A point in the right direction would be very much appreciated, too.

Thanks.

Answer 1

You can minimize the code by using toggle() instead of your if/else statements

Working Example: 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: A Boolean indicating whether to show or hide the elements.

Answer 2

what about this??

  $(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

This seems fine to me, unless you have lots of or dynamic controls. However u can use JQuery addClass / removeClass , switch statement, multiple Selector $('#grade, #class').show(); to minimize the code

Answer 4

您还可以使用切换状态： http : //jsfiddle.net/bGDME/3/

Answer 5

This will do what you're looking for: http://jsfiddle.net/bGDME/30/

You simply use the val() of the scope within the eq() method to determine which sibling select should remain shown. If 'school' is chosen from the first dropdown, then neither get shown:

$(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

Here's an approach using HTML5 data attributes to declaratively set "scope levels" on the select boxes: http://jsfiddle.net/bGDME/6/

And the updated 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']();
    });
});

The primary advantage this one might have is that the code stays the same regardless of how many "scoped selects" you have (assuming you update the initial selector, of course).

Answer 7

Its very simple,

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

Answer 8

If you want to make it a bit more dynamic by not touching the javascript when you want to add more select elements, then you can do small changes to your javascript code and HTML and you will only need to edit the 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>