선택 상자 옵션의 ID가 예상대로 작동하지 않습니다.

Question

선택 상자에서 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') 
    ... 
});