프로그래밍 방식으로 <option>을 선택하면 Chrome에서는 작동하지 않지만 Opera에서는 작동합니다.

Question

select의 1 옵션에 따라 전체 옵션 목록을 변경해야하는 userscript가 있습니다. 오페라에서이 스크립트는 정상적으로 작동하지만 크롬에서는 작동하지 않습니다 (예, jQuery를 사용할 수 있음).

HTML :

<select id="autoConfig-gametype" style="width: 100%;"> 
    <option value="1" selected="">1. [RECOMMENDED] All latest Game-settings, Paladin, archers, simple tech smithy</option> 
    <option value="2">2. No paladin, archers, simple tech system [TWMASTERS Settings]</option> 
    <option value="3">3. No paladin, no archers. Packages, 3 lvl tech-system. [CLASSIC]</option> 
</select> 

<select name="game::tech"> 
    <option value="0">0: 10 level</option> 
    <option value="1">1: 3 level (up to 15)</option> 
    <option value="2" selected="selected">2: Simple</option> 
</select> 

가 jQuery를 통해 내가 attr 및 prop을 사용했지만, 모두 크롬에서 어떤 결과가 없습니다. 조작해야 할 선택 영역은 변경되지 않습니다.

jQuery를 : 만 크롬을 사용하는 사람이 스크립트를 제작하고 있기 때문에

$("#autoConfig-gametype").change(function() 
{ 
    var value = $(this).val(); 

    switch(value) 
    { 
     case "1": 
      // Game > Tech 
      $("[name='game::tech'] option").removeProp("selected"); 
      $("[name='game::tech'] option").removeAttr("selected"); 
      $("[name='game::tech'] option:eq(0)").attr("selected",true); 
      $("[name='game::tech'] option:eq(0)").prop("selected",true); 
      break; 
     case "2": 
      // Game > Tech 
      $("[name='game::tech'] option").removeProp("selected"); 
      $("[name='game::tech'] option").removeAttr("selected"); 
      $("[name='game::tech'] option:eq(1)").attr("selected",true); 
      $("[name='game::tech'] option:eq(1)").prop("selected",true); 
      break; 
     case "3": 
      // Game > Tech 
      $("[name='game::tech'] option").removeProp("selected"); 
      $("[name='game::tech'] option").removeAttr("selected"); 
      $("[name='game::tech'] option:eq(2)").attr("selected",true); 
      $("[name='game::tech'] option:eq(2)").prop("selected",true); 
      break; 
    } 
}); 

나는 가지, 바로 지금 여기 붙어있다.

Answer 1

removeProp 및 removeAttr이 작동하지 않아 .prop('property', true/false)을 사용합니다. Chrome의 바이올린을 참조하십시오.

바이올린은 ->http://jsfiddle.net/6bxew/

$("#autoConfig-gametype").change(function() 
{ 
    var value = $(this).val(); 

    switch(value) 
    { 
    case "1": 
     // Game > Tech 
     $("[name='game\:\:tech'] option").prop("selected", false); 
     $("[name='game\:\:tech'] option:eq(0)").prop("selected", true); 
     break; 
    case "2": 
     // Game > Tech 
     $("[name='game\:\:tech'] option").prop("selected", false); 
     $("[name='game\:\:tech'] option:eq(1)").prop("selected",true); 
     break; 
    case "3": 
     // Game > Tech 
     $("[name='game::tech'] option").prop("selected", false); 
     $("[name='game::tech'] option:eq(2)").prop("selected",true); 
     break; 
    } 
}); 

Answer 2

이 함께 시도 :

$("#autoConfig-gametype").change(function() 
{ 
    var value = $(this).val(); 

    switch(value) 
    { 
     case "1": 
      // Game > Tech 
      $("[name='game::tech'] option:eq(0)").prop("selected",true); 
      break; 
     case "2": 
      // Game > Tech 
      $("[name='game::tech'] option:eq(1)").prop("selected",true); 
      break; 
     case "3": 
      // Game > Tech 
      $("[name='game::tech'] option:eq(2)").prop("selected",true); 
      break; 
    } 
});​ 

jsFiddler demo

주

문서 removeProp에서 : 같은 확인, 비활성화 또는 선택 등의 기본 속성을 제거하려면이 방법을 사용하지 마십시오. 그러면 속성이 완전히 제거되고 제거되면 요소에 다시 추가 할 수 없습니다. 대신 .prop()를 사용하여 이러한 속성을 false로 설정하십시오.