CODEWITHSUNDEEP
javascriptjqueryhtml
rgin
rgin

Reputation: 2311

jQuery - Is there a more efficient way to do this?

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.

Upvotes: 0

Views: 106

Answers (8)

maxedison
maxedison

Reputation: 17553

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

Upvotes: 0

Alex
Alex

Reputation: 1668

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>

Upvotes: 0

gtamil
gtamil

Reputation: 552

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

Upvotes: 0

xkeshav
xkeshav

Reputation: 54032

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

Upvotes: 0

jmar777
jmar777

Reputation: 39649

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).

Upvotes: 0

voigtan
voigtan

Reputation: 9031

you can also use a switch state: http://jsfiddle.net/bGDME/3/

Upvotes: 0

hungryMind
hungryMind

Reputation: 6999

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

Upvotes: 0

hunter
hunter

Reputation: 63522

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.

Upvotes: 5

Related Questions