복수 선택 Firefox의 버그

여러 선택 값과 관련된 특정 문제가 있습니다. 나는이 문제를 보여주는 JSfiddle 상자에 포장 한복수 선택 Firefox의 버그

<form id="form-to-submit"> 
    <select multiple="true" name="sel" id="sel"> 
     <option id="0_1" value="0">Bacon</option> 
     <option value="1">Pickles</option> 
     <option id="0_3" value="2">Mushrooms</option> 
     <option value="3">Cheese</option>   
    </select> 
</form> 
<button id="setValues">Set Values</button> 

JS: 
$("#setValues").click(function() { 
    $("#sel").find("option").removeAttr("selected"); 
    $("#0_1").attr("selected","selected"); 
    $("#0_3").attr("selected","selected"); 

});

사용자가 설정을 클릭

버튼 값은 그 다음 첫 번째와 세 번째 옵션으로 선택로 설정, 속성을 선택한 모든 옵션을 지 웁니다.

문제 : Firefox에서 값 설정 버튼을 다시 클릭하면 선택 값이 지워집니다. 다른 브라우저에서는 잘 작동합니다.

아이디어가 있으십니까?

출처

2014-11-09 Simon

인스턴트 솔루션 !!!!

$("#0_1").prop("selected", true); 
$("#0_3").prop("selected", true);

일부 설명?!?

그럼 .attr()과 .prop()의 차이점은 무엇입니까?

기본적으로 속성은 DOM 요소이며 속성은 브라우저 파서를 사용하여 나중에 DOM 트리로 구문 분석되는 HTML 요소 용입니다.

브라우저마다 약간의 동작이 다르기 때문에 .attr() 대신 .prop()를 사용하는 것이 좋습니다.

가 jQuery API Documentation에서 인용 :

". 는 .prop() 메소드를 사용하여 검색하고 DOM의 체크로, 선택된 이러한 특성 또는 형태의 요소의 해제 상태를 변경을"

있다 .prop()로 전환하려는 많은 이유가 있습니다. 여기 .attr()와 .prop()의 이상에 뛰어 나에게 도움이 큰 스레드의)

.prop() vs .attr()

출처

2014-11-09 18:17:02

이 나를 위해 일했다. attr() 크롬에서 원활하게 작동하지만 IE Edge 및 Firefox에서 실패합니다. .prop()가 트릭을 수행했습니다. 고마워. –

두 가지 :

가 선택된 상태를 설정하려면이 prop를 사용 , 아니 attr.
CSS 선택기에서
및 idcannot start with a digit, 그래서 #0_1 및 #0_3이 유효 선택기입니다. (그것들은 id 셀렉터가 querySelectorAll이나 Sizzle의 파서와 같은 CSS 선택기 파서 대신에 getElementById으로 끝나는 jQuery의 최적화 때문에 작동하지만, 여러분이 의존해야하는 것은 아닙니다. 예를 들어 id="123"의 요소와 그 안에 요소 foo의 요소가있는 경우 $("#123 foo")은 오류를 발생시킵니다.)

수정 사항 :

<form id="form-to-submit"> 
    <select multiple="true" name="sel" id="sel"> 
     <option id="x0_1" value="0">Bacon</option> 
     <option value="1">Pickles</option> 
     <option id="x0_3" value="2">Mushrooms</option> 
     <option value="3">Cheese</option>   
    </select> 
</form> 
<button id="setValues">Set Values</button> 

$("#setValues").click(function() { 
    $("#sel").find("option").removeAttr("selected"); 
    $("#x0_1").prop("selected",true); 
    $("#x0_3").prop("selected",true); 

});

Updated fiddle

출처

2014-11-09 18:18:34

복수 선택 Firefox의 버그

답변

관련 문제