jQuery를 사용하여 드롭 다운 목록의 선택된 값을 변경하십시오.

알려진 값을 가진 드롭 다운 목록이 있습니다. 내가하려고하는 것은 드롭 다운 목록을 jQuery 사용하여 존재하는 특정 값으로 설정하는 것 입니다. 일반 JavaScript를 사용하면 다음과 같은 작업을 수행합니다.

ddl = document.getElementById("ID of element goes here");
ddl.value = 2; // 2 being the value I want to set it too.

그러나 선택기에 CSS 클래스를 사용하고 있기 때문에 jQuery 로이 작업을 수행해야합니다 (멍청한 ASP.NET 클라이언트 ID …).

내가 시도한 몇 가지 사항은 다음과 같습니다.

$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

jQuery로 어떻게 할 수 있습니까?

최신 정보

결과적으로 처음으로 다음과 같이 올바르게했습니다.

$("._statusDDL").val(2);

바로 위에 경고를 넣으면 정상적으로 작동하지만 경고를 제거하고 최대 속도로 실행하면 오류가 발생합니다.

선택한 속성을 설정할 수 없습니다. 잘못된 색인

jQuery 또는 Internet Explorer 6 의 버그인지 확실하지 않지만 (Internet Explorer 6을 추측하고 있습니다 ) 정말 짜증납니다.

답변

jQuery의 문서 상태는 다음과 같습니다.

[jQuery.val] 은 모든 라디오 버튼, 확인란 및 값 집합과 일치하는 옵션을 확인하거나 선택 합니다.

이 동작은 jQuery버전 1.2이상입니다.

당신은 이것을 원할 것입니다 :

$("._statusDDL").val('2');

답변

숨겨진 필드를 사용하면 다음과 같이 사용해야합니다.

$("._statusDDL").val(2);
$("._statusDDL").change();

또는

$("._statusDDL").val(2).change();

답변

참고로 CSS 클래스를 사용하지 않아도됩니다.

다음 코드 줄을 작성하여 클라이언트에서 올바른 제어 이름을 얻을 수 있습니다.

$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET은 jQuery 내에서 컨트롤 ID를 올바르게 렌더링합니다.

답변

그냥 시도해보십시오

$("._statusDDL").val("2");

와 함께

$("._statusDDL").val(2);

답변

이 솔루션은 드롭 다운 목록의 각 항목에 드롭 다운 목록 에서의 위치와 관련된 val () 값 이 있다고 가정 합니다.

그렇지 않은 경우 상황이 조금 더 복잡합니다.

드롭 다운 목록의 선택된 색인 을 읽으 려면 다음을 사용하십시오.

$("#dropDownList").prop("selectedIndex");

드롭 다운 목록의 선택된 색인 을 설정 하려면 다음을 사용하십시오.

$("#dropDownList").prop("selectedIndex", 1);

점을 유의 소품 () 기능은 JQuery와 V1.6 이상이 필요합니다.

이 두 기능을 어떻게 사용하는지 봅시다.

월 이름의 드롭 다운 목록이 있다고 가정하십시오.

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

“이전 달”및 “다음 달”버튼을 추가하여 현재 선택한 드롭 다운 목록 항목을보고 이전 / 다음 달로 변경합니다.

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

이 버튼이 실행되는 JavaScript는 다음과 같습니다.

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

다음 사이트는 JSON 데이터로 드롭 다운 목록을 채우는 방법을 보여주는 데 유용합니다.

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

휴 !!

도움이 되었기를 바랍니다.

답변

몇 가지 해결책을 본 후에 이것은 나를 위해 일했습니다.

일부 값을 가진 하나의 드롭 다운 목록이 있고 다른 드롭 다운 목록에서 동일한 값을 선택하고 싶습니다 … selectIndex먼저 첫 번째 드롭 다운 의 변수를 변수에 넣 습니다.

var indiceDatos = $('#myidddl')[0].selectedIndex;

그런 다음 두 번째 드롭 다운 목록에서 해당 색인을 선택합니다.

$('#myidddl2')[0].selectedIndex = indiceDatos;

노트 :

나는 이것이 가장 짧고 신뢰할 수 있고 일반적이며 우아한 해결책이라고 생각합니다.

필자의 경우 value 속성 대신 선택한 옵션의 data 속성을 사용하고 있기 때문입니다. 따라서 각 옵션마다 고유 한 값이 없으면 위의 방법이 가장 짧고 달콤합니다!

답변

나는 이것이 오래된 질문이며 위의 해결책은 경우를 제외하고는 잘 작동한다는 것을 알고 있습니다.

처럼

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

따라서 항목 4는 브라우저에서 “선택됨”으로 표시되고 이제 값을 3으로 변경하고 항목 4 대신 선택된 항목 “항목 3″을 표시하려고합니다.

jQuery("#select_selector").val(3);

브라우저에서 항목 3이 선택된 것을 볼 수 있지만 php 또는 asp에서 데이터를 처리 할 때 선택한 값을 “4”로 찾을 수 있습니다.

<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

서버 측 언어에서는 마지막 값을 “4”로 가져옵니다.

이 기록에 대한 나의 최종 해결책

newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');

편집 : 숫자가 아닌 값에 동일한 기능을 사용할 수 있도록 “+ newselectedIndex +”주위에 작은 따옴표를 추가하십시오.

그래서 내가하는 일은 실제로 선택된 속성을 제거한 다음 새로운 속성을 선택된 것으로 만듭니다.

@strager, @ y0mbo, @ISIK 및 기타와 같은 수석 프로그래머의 의견에 감사드립니다.

스택플로우

스택

jQuery를 사용하여 드롭 다운 목록의 선택된 값을 변경하십시오.

답변

답변

답변

답변

답변

답변

답변