ID auf Auswahlfeld Optionen funktioniert nicht wie erwartet

Question

Ich arbeite an Auswahlbox und mit jquery.

HTML-Struktur:

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

Wenn ich wählen Sie die Option Auswahlfeld auf der Basis von id ich die Broschüre Zahlen auf der DIV bin Einstellung, wer ist mybook und mybook1.

Mein Problem ist die oben genannte Jquery funktioniert ordnungsgemäß in allen Browsern außer Chrome und Safari. Kann mir jemand in die richtige Richtung zeigen?

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

Answer 2

Das Ereignis click von option wird nicht von allen Browsern unterstützt. ändern Sie sich auf change der select:

$('#selector').change(function(e){ 
    var selectedId = $('option[selected="selected"]',this).attr('id'); 
    if (selectedId == 'select_e1_home'){ 
     e.preventDefault(); $('#mybook, #mybook1').booklet(1); 
    } 
    else if(selectedId == 'select_e1_resin_collection') 
    ... 
});