CODEWITHSUNDEEP
jqueryhtmlselectdrop-down-menu
tebrown
tebrown

Reputation: 153

jQuery select box interaction

I have got a working jsFiddle of a select drop-down box but it's not quite the result I need. For this example I have used 'Port of Auckland'. If you click 'Port of Auckland' it will show it's content but I would like the drop-box value to change so it matches the port you're viewing.

UPDATE Solution was to use the prop function. Also, instead of duplicating all the ports... is there any easier way to minify the jQuery to work for all? I then won't have to show/hide heaps of elements.

http://jsfiddle.net/an173g55/1/

$(document).ready(function(){
    $("select").change(function(){
        $( "select option:selected").each(function(){
            if($(this).attr("value")=="all"){
                $(".auckland").hide();
                $(".all").show();   
            }
           if($(this).attr("value")=="auckland"){
                $(".all").hide();
                $(".auckland").show();

            }
        });
    }).change();

    $('.auckland-link').click(function() {
    $('.auckland').show();
    $(".all").hide();
});


});

Any help will be much appreciated. Cheers.

Upvotes: 0

Views: 495

Answers (1)

Victor Canô
Victor Canô

Reputation: 543

You can change it using jQuery .prop() method.

$(document).ready(function(){
    $("select").change(function(){
        $( "select option:selected").each(function(){
            if($(this).attr("value")=="all"){
                $(".auckland").hide();
                $(".all").show();



            }
           if($(this).attr("value")=="auckland"){
                $(".all").hide();
                $(".auckland").show();

            }
        });
    }).change();

    $('.auckland-link').click(function() {
        $('select option:contains("Auckland")').prop('selected', true);
        $('.auckland').show();
        $(".all").hide();
});


});

Here is a working sample of it, forked from your Fiddle: http://jsfiddle.net/Lny58ve3/2/

Upvotes: 1

Related Questions