javascript - tag - jquery selector select selected value




jQuery를 사용하여 드롭 다운 목록에서 선택한 값 변경 (11)

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

Ajax 호출에서 데이터를로드 할 때 여러 차례이 문제가 발생했습니다. 나도 .NET을 사용하며 jQuery 선택기를 사용할 때 clientId에 맞게 조정하는 데 시간이 걸린다. 현재 가지고있는 문제를 수정하고 setTimeout 속성을 추가하지 않아도되도록 Ajax 호출에 " async: false "를 넣으면 추가중인 객체를 다시 가질 수있는 충분한 시간이 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를 사용하여 존재하는 특정 값으로 드롭 다운 목록을 설정하는 것입니다. 일반적인 JavaScript를 사용하면 다음과 같이 할 수 있습니다.

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

그러나, 나는 선택기 (어리석은 ASP.NET 클라이언트 ID ...) CSS 클래스를 사용하고 있기 때문에 jQuery 함께이 작업을 수행해야합니다.

다음은 내가 시도한 몇 가지 사항입니다.

$("._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을 추측하고 있습니다)의 버그인지 확실하지 않지만 몹시 짜증납니다.


'데이터 분류'라는 제목의 드롭 다운이있는 경우 :

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

같이 사용해보십시오.

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

~과 함께

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

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

처럼

<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으로 변경하고 위의 해결 방법에 따라 Item4.So 대신 "Item3"을 표시하려고합니다.

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

편집 : "+ newselectedIndex +"주위에 작은 따옴표를 추가하여 숫자가 아닌 값에도 같은 기능을 사용할 수 있습니다.

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

@strager, @ y0mbo, @ISIK 및 기타와 같은 고위급 프로그래머들로부터 이에 대한 의견을 환영합니다.


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


몇 가지 해결책을 살펴본 후에, 이것은 저에게 도움이되었습니다.

일부 값을 가진 하나의 드롭 다운 목록이 있고 다른 드롭 다운 목록에서 같은 값을 선택하고 싶습니다 ... 그래서 먼저 변수에 첫 번째 드롭 다운의 selectIndexselectIndex 습니다.

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

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

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

노트 :

나는 이것이 가장 짧고, 믿을 만하고, 일반적이며 우아한 해결책이라고 생각한다.

필자의 경우, value 속성 대신 selected option의 data 속성을 사용하고 있습니다. 따라서 각 옵션마다 고유 한 가치가 없다면 위의 방법이 가장 짧고 달콤합니다!


이러한 솔루션은 드롭 다운 목록의 각 항목에 드롭 다운 목록에서의 위치와 관련된 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

휴!

희망이 도움이됩니다.


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

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

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

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

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

$.clientID("_statusDDL")

jQuery의 문서 내용 :

[jQuery.val]은 모든 라디오 버튼, 체크 박스 및 값 세트와 일치하는 옵션을 선택하거나 선택합니다.

이 동작은 jQuery 버전 1.2 이상에서 발생합니다.

당신은 이것을 원할 가능성이 큽니다 :

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

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

$("select[name$='MyDropDown']").val() .





html-select