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 및 기타와 같은 수석 프로그래머의 의견에 감사드립니다.

제목이 "데이터 분류"인 드롭 다운이있는 경우 :

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

변수에 넣을 수 있습니다 :

var dataClsField = $('select[title="Data Classification"]');

그런 다음 드롭 다운에 가질 값을 다른 변수에 넣으십시오.

var myValue = "Top Secret";  // this would have been "2" in your example

그런 다음에 넣은 필드를 사용하여 dataClsField찾아서 다음을 myValue사용하여 선택합니다 .prop().

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

또는을 사용할 수도 .val()있지만 .드롭 다운의 클래스와 일치하는 경우에만 셀렉터를 사용할 수 있으며 괄호 안의 값에 따옴표를 사용하거나 이전에 설정 한 변수를 사용해야합니다.

dataClsField.val(myValue);

그래서 setTimeout을 사용하여 300 밀리 초 후에 실행되도록 변경했습니다. 지금 일하는 것 같습니다.

Ajax 호출에서 데이터를로드 할 때이 문제가 여러 번 발생했습니다. 나도 .NET을 사용하고 있으며 jQuery 선택기를 사용할 때 clientId에 적응하는 데 시간이 걸립니다. 겪고있는 문제를 해결하고 setTimeout속성 을 추가하지 않으 async: false려면 Ajax 호출 에 " "를 넣으면 DOM에 선택에 추가 할 객체를 되돌릴 수있는 충분한 시간이 주어집니다. 아래의 작은 샘플 :

$.ajax({
    type: "POST",
    url: document.URL + '/PageList',
    data: "{}",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        var pages = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

        $('#locPage' + locId).find('option').remove();

        $.each(pages, function () {
            $('#locPage' + locId).append(
                $('<option></option>').val(this.PageId).html(this.Name)
            );
        });
    }
});

참고 사항-jQuery에서 와일드 카드 선택기를 사용하여 ASP.NET CLient ID로 난독 화 된 항목을 가져 왔습니다.이 또한 도움이 될 수 있습니다.

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

id * 와일드 카드를 참고하십시오. 이름이 "ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown"인 경우에도 요소를 찾습니다.

클라이언트 ID를 얻기 위해 확장 함수를 사용합니다.

$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});

그런 다음 jQuery에서 다음과 같이 ASP.NET 컨트롤을 호출 할 수 있습니다.

$.clientID("_statusDDL")

또 다른 옵션은 .net에서 제어 매개 변수 ClientID = "Static"을 설정 한 다음 설정 한 ID로 JQuery의 객체에 액세스 할 수 있습니다.

<asp:DropDownList id="MyDropDown" runat="server" />

사용하십시오 $("select[name$='MyDropDown']").val().

드롭 다운 목록에 값을로드하거나 선택할 값을 어떻게 결정합니까? Ajax를 사용하여이 작업을 수행하는 경우 선택하기 전에 지연이 필요한 이유는 해당 행이 실행될 때 값이로드되지 않았기 때문일 수 있습니다. 또한 경고 조치가 데이터를로드하기에 충분한 지연 시간을 제공하므로 상태를 설정하기 전에 경고문을 라인에 넣을 때 왜 작동했는지 설명합니다.

jQuery의 Ajax 메소드 중 하나를 사용하는 경우 콜백 함수를 지정한 다음 콜백 함수에 넣을 $("._statusDDL").val(2);수 있습니다.

이 방법은 300ms보다 오래 걸리더라도 데이터가 준비 될 때 메서드가 실행되었음을 확신 할 수 있으므로 문제를보다 안정적으로 처리 할 수 ​​있습니다.

<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode = "Static"

$('#DropUserType').val('1');

내 경우에는 .attr () 메서드를 사용하여 작동시킬 수있었습니다.

$("._statusDDL").attr("selected", "");