Question

I am working on select box and using jquery.

HTML structure:

<form method="" action="" name="form_controller">
        <select name="select_pages" id="selector">
            <option id="select_e1_home">Home</option>
            <option id="select_e1_resin_collection">Resin Collection</option>
            <option id="select_e1_metal_collection">Metal Collection</option>
            <option id="select_e1_decor_track">Decor Track</option>
            <option id="select_e1_accessories">Accessories</option>
            <option id="select_e1_acrylic_collection">Acrylic Collection</option>
            <option id="select_e1_novelty_collection">Novelty Collection</option>
            <option id="select_e1_wood_collection">Wood Collection</option>
            <option id="select_e1_specification">Specification</option>
        </select>
    </form>

Jquery:

$('#selector #select_e1_home').click(function(e){ e.preventDefault(); $('#mybook, #mybook1').booklet(1); });
$('#selector #select_e1_resin_collection').click(function(e){ e.preventDefault(); $('#mybook, #mybook1').booklet(3); });

When i select option from select box on the basis of id i am setting the booklet numbers on the DIV who’s is mybook and mybook1.

My problem is the above jquery is working properly in all browsers except Chrome and safari. Can any one point me in right direction.

Answer 1

$('#selector').change(function(e){
        if(document.getElementById("selector").selectedIndex == 0){
            e.preventDefault(); $('#mybook, #mybook1').booklet(1);
        }
        else if(document.getElementById("selector").selectedIndex == 1){
            e.preventDefault(); $('#mybook, #mybook1').booklet(3);
        }
        else if(document.getElementById("selector").selectedIndex == 2){
            e.preventDefault(); $('#mybook, #mybook1').booklet(10);
        }
        else if(document.getElementById("selector").selectedIndex == 3){
            e.preventDefault(); $('#mybook, #mybook1').booklet(17);
        }
        else if(document.getElementById("selector").selectedIndex == 4){
            e.preventDefault(); $('#mybook, #mybook1').booklet(18);
        }
        else if(document.getElementById("selector").selectedIndex == 5){
            e.preventDefault(); $('#mybook, #mybook1').booklet(20);
        }
        else if(document.getElementById("selector").selectedIndex == 6){
            e.preventDefault(); $('#mybook, #mybook1').booklet(24);
        }
        else if(document.getElementById("selector").selectedIndex == 7){
            e.preventDefault(); $('#mybook, #mybook1').booklet(28);
        }
        else if(document.getElementById("selector").selectedIndex == 8){
            e.preventDefault(); $('#mybook, #mybook1').booklet(32);
        }
    });