jQuery에서 <select>를 선택 해제하는 가장 좋은 방법은 무엇입니까?

<select size="2">
<option selected="selected">Input your option</option>
<option>Input your option</option>
</select>

jQuery를 사용하여 옵션을 우아하게 선택 해제하는 가장 좋은 방법은 무엇입니까?

removeAttr 사용 ...

$("option:selected").removeAttr("selected");

또는 소품

$("option:selected").prop("selected", false)

여기에 많은 답변이 있지만 불행히도 모든 답변은 상당히 오래되어 attr/ / 의존 removeAttr하지 않습니다.

@coffeeyes 좋은 크로스 브라우저 솔루션을 사용하는 것으로 올바르게 언급하십시오.

$("select").val([]);

또 다른 좋은 크로스 브라우저 솔루션은

// Note the use of .prop instead of .attr
$("select option").prop("selected", false);

여기 에서 자체 테스트를 실행하는 것을 볼 수 있습니다 . IE 7/8/9, FF 11, Chrome 19에서 테스트되었습니다.

그 이후로 오랜 시간이 걸렸으며 구형 브라우저에서 이것을 테스트하지는 않았지만 훨씬 간단한 대답은 다음과 같습니다.

$("#selectID").val([]);

.val ()이 아니라 선택 작동 http://api.jquery.com/val/

가장 간단한 방법

$('select').val('')

나는 이것을 단순히 선택 자체에서 사용했고 트릭을 수행했습니다.

나는에있어 jQuery를 1.7.1 .

지금까지 답변은 IE6 / 7의 다중 선택에 대해서만 작동합니다. 보다 일반적인 비 다중 선택의 경우 다음을 사용해야합니다.

$("#selectID").attr('selectedIndex', '-1');

이것은 flyfishr64로 연결된 게시물에서 설명됩니다. 그것을 보면, 다중 / 비 다중의 두 가지 경우가 있음을 알 수 있습니다. 완벽한 솔루션을 위해 두 가지를 모두 부르는 것은 아무것도 없습니다.

$("#selectID").attr('selectedIndex', '-1').find("option:selected").removeAttr("selected");

오 jquery.

아직 네이티브 자바 스크립트 접근 방식이 있기 때문에 제공해야 할 필요가 있다고 생각합니다.

var select = document.querySelector('select'); //hopefully you'll use a better selector query
select.selectedIndex = 0; // or -1, 0 sets it to first option, -1 selects no options

그리고 이것이 얼마나 빠른지 보여 드리기 위해 : 기준

$("#selectID option:selected").each(function(){
  $(this).removeAttr("selected");
});

이것은 각 항목을 반복하고 확인 된 항목 만 선택 취소합니다.

빠른 구글 이 IE에서 단일 및 다중 선택 목록 모두에 대해 원하는 작업을 수행하는 방법을 설명하는 이 게시물 을 발견 했습니다 . 이 솔루션은 매우 우아하게 보입니다.

$('#clickme').click(function() {
        $('#selectmenu option').attr('selected', false);

}); 

$("#select_id option:selected").prop("selected", false);

$(option).removeAttr('selected') //replace 'option' with selected option's selector

솔루션 주셔서 감사합니다.

단일 선택 콤보 목록에 대한 솔루션은 완벽하게 작동합니다. 많은 사이트에서 검색 한 후이 문제를 발견했습니다.

$("#selectID").attr('selectedIndex', '-1').children("option:selected").removeAttr("selected");

$("option:selected").attr("selected", false);

또 다른 간단한 방법 :

$("#selectedID")[0].selectedIndex = -1

일반적으로 선택 메뉴를 사용하면 각 옵션에 관련 값이 있습니다. 예를 들어

<select id="nfl">
  <option value="Bears Still...">Chicago Bears</option>
  <option selected="selected" value="Go Pack">Green Bay Packers</option>
</select>
console.log($('#nfl').val()) logs "Go Pack" to the console
Set the value to an empty string $('#nfl').val("")
console.log($('#nfl').val()) logs "" to the console

이제 이것은 옵션에서 선택된 속성을 제거하지 않지만 실제로 원하는 것은 값입니다.

다음과 같이 선택에 ID를 설정하십시오.
<select id="foo" size="2">

그런 다음 다음을 사용할 수 있습니다.
$("#foo").prop("selectedIndex", 0).change();