選択ボックスのオプションのIDが期待どおりに機能しない

Question

私はselect boxとjqueryを使用しています。

HTML構造：

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

私はIDに基づいて選択ボックスからオプションを選択すると、私はだDIVに冊子番号を設定していますがのMyBookとmybook1です。

私の問題は、上記のjqueryがChromeとSafariを除くすべてのブラウザで正常に動作していることです。誰でも私を正しい方向に向けることができます。

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

のclickイベントは、一部のブラウザではサポートされていません。

$('#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') 
    ... 
});