jQuery选择框交互

Question

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.

Answer 1

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/