jQuery를 사용하여 드롭다운 목록의 선택한 값 변경

jQuery를 사용하여 드롭다운 목록의 선택한 값 변경

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

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

단, 셀렉터(stupid ASP)에 CSS 클래스를 사용하고 있기 때문에 jQuery를 사용해야 합니다.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');

.change()드롭다운 리스트의 프론트 엔드에 옵션이 표시됩니다.

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

숨김 필드에서는 다음과 같이 사용해야 합니다.

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

또는

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

이러한 솔루션은 드롭다운목록의 각 항목에 드롭다운목록의 위치와 관련된 val() 값이 있다고 가정하는 것 같습니다.

그렇지 않으면 일이 좀 더 복잡해진다.

드롭다운 목록의 선택한 인덱스를 읽으려면 다음을 사용합니다.

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

드롭다운 목록의 선택한 인덱스를 설정하려면 다음을 사용합니다.

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

prop() 기능을 사용하려면 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

참고 사항일 뿐입니다. 이 작업을 수행하기 위해 CSS 클래스를 사용할 필요는 없습니다.

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

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

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

로 시험해 보세요.

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

와 함께가 아니라

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

몇 가지 해결책을 찾아본 결과 효과가 있었습니다.

값이 있는 드롭다운 목록이 하나 있고 다른 드롭다운 목록에서 동일한 값을 선택하고 싶습니다. 먼저 .selectIndex내첫운운 운운운운운

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

그런 다음 두 번째 드롭다운 목록에서 인덱스를 선택합니다.

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

주의:

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

제 경우 값 속성 대신 선택한 옵션의 데이터 속성을 사용하고 있기 때문입니다.각 옵션에 고유한 값이 없다면 위의 방법이 가장 짧고 달콤합니다!!

이것은 오래된 질문이며, 경우에 따라서는 위의 해결방법이 정상적으로 기능하는 것을 알고 있습니다.

맘에 들다

<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가 "Selected"로 표시되고 값을 3으로 변경하여 항목 4가 아닌 "Item 3"으로 표시하려고 합니다.위의 해결책에 따르면

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

브라우저에서 선택한 항목 3이 표시됩니다.그러나 데이터를 php 또는 asp로 처리하면 선택한 값이 "4"로 표시됩니다.그 이유는 html이 이렇게 보이기 때문입니다.

<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');  

편집: "+new selected" 주위에 작은 따옴표를 추가합니다.Index+"를 선택하면 숫자가 아닌 값에 동일한 기능을 사용할 수 있습니다.

따라서 선택한 Atribute를 삭제하고 새 Atribute를 선택한 대로 만듭니다.

@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);

set Timeout을 사용하여 300밀리초 후에 실행되도록 변경했습니다.이제 작동되는 것 같아.

Ajax 콜에서 데이터를 로드할 때 여러 번 마주친 적이 있습니다.저도 사용하고 있습니다.NET 및 jQuery 셀렉터를 사용할 때 clientId로 조정되는 데 시간이 걸립니다.발생한 문제를 수정하고 추가 작업을 피하기 위해setTimeout「프로퍼티」라고 간단하게 말할 수 있습니다.async: falseAjax 콜의 경우 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)
            );
        });
    }
});

다음과 같이 확장 함수를 사용하여 클라이언트 ID를 가져옵니다.

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

그러면 ASP에 전화하면 됩니다.jQuery의 NET 컨트롤은 다음과 같습니다.

$.clientID("_statusDDL")

다른 옵션은 제어 매개 변수 클라이언트를 설정하는 것입니다..net에서 ID="Static"을 입력한 다음 설정한 ID로 JQuery의 개체에 액세스할 수 있습니다.

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

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

주의사항 - jQuery의 와일드카드 셀렉터를 사용하여 ASP에 의해 난독화된 아이템을 가져옵니다.NET 클라이언트 ID - 이 방법도 도움이 될 수 있습니다.

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

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

id* 와일드카드 주의: 이름이 "ctl00$ctl00"인 경우에도 요소가 검색됩니다.$ContentPlaceHolder1$ContentPlaceHolder1$MyDropDown"

드롭다운 목록에 값을 로드하거나 선택할 값을 결정하려면 어떻게 해야 합니까?Ajax를 사용하여 이 작업을 수행하는 경우 선택 전에 지연이 필요한 이유는 해당 회선이 실행될 때 값이 로딩되지 않았기 때문일 수 있습니다.또한 경보 액션은 데이터 로딩에 충분한 지연을 주기 때문에 상태를 설정하기 전에 경보스테이트먼트를 회선에 붙였을 때 동작하는 이유도 설명됩니다.

jQuery의 Ajax 메서드 중 하나를 사용하는 경우 콜백 함수를 지정한 후$("._statusDDL").val(2);콜백 함수로 변환합니다.

300밀리초 이상 걸리더라도 데이터가 준비되었을 때 메서드가 실행되었음을 확인할 수 있기 때문에 이 방법이 이 문제를 처리하는 데 더 신뢰할 수 있는 방법입니다.

<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="스태틱"

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

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

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

순수 JS

최신 브라우저에서는 순수 JS에서는 CSS 셀렉터를 사용하는 것이 문제가 되지 않습니다.

document.querySelector('._statusDDL').value = 2;

function change() {
  document.querySelector('._statusDDL').value = 2;
}

<select class="_statusDDL">
  <option value="1" selected>A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

<button onclick="change()">Change</button>

옵션명과 jQuery에서 선택한 옵션에서 찾으려면 아래 코드를 참조하십시오.-

<div class="control">
           <select name="country_id" id="country" class="required-entry" title="Country" data-validate="{'validate-select':true}" aria-required="true">
              <option value=""> </option>
              <option value="SA">Saudi Arabia</option>
              <option value="AF">Afghanistan</option>
              <option value="AR">Argentina</option>
              <option value="AM">Armenia</option>
              <option value="AW">Aruba</option>
              <option value="AU">Australia</option>
              <option value="AT">Austria</option>
              <option value="IS">Iceland</option>
              <option value="IN">India</option>
              <option value="ID">Indonesia</option>
              <option value="IR">Iran</option>
              <option value="IQ">Iraq</option>
              <option value="IE">Ireland</option>
              <option value="IM">Isle of Man</option>
              <option value="IL">Israel</option>
              <option value="IT">Italy</option>
              <option value="JM">Jamaica</option>
              <option value="JP">Japan</option>
              <option value="JE">Jersey</option>
              <option value="JO">Jordan</option>
              <option value="AE">United Arab Emirates</option>
              <option value="GB">United Kingdom</option>
              <option value="US" selected="selected">United States</option>
           </select>
        </div>
<script type='text/javascript'>
let countryRegion="India";
     jQuery("#country option:selected").removeAttr("selected");
        let cValue= jQuery("#country option:contains("+countryRegion+")").val();
        jQuery("#country option[value='"+cValue +"']").attr('selected', 'selected');
</script>

도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/499405/change-the-selected-value-of-a-drop-down-list-with-jquery