jQuery를 사용하여 DropDownList의 값을 설정하려면 어떻게해야합니까?

질문에서 알 수 있듯이 jQuery를 사용하여 DropDownList 컨트롤의 값을 어떻게 설정합니까?

$("#mydropdownlist").val("thevalue");

옵션 태그의 값이 val 메소드의 값과 일치하는지 확인하십시오.

인덱스를 사용하는 경우 .attr ()을 사용하여 선택한 인덱스를 직접 설정할 수 있습니다.

$("#mydropdownlist").attr('selectedIndex', 0);

드롭리스트의 첫 번째 값으로 설정됩니다.

편집 : 내가 위에서했던 방식으로 작동했습니다. 그러나 더 이상 그렇지 않은 것 같습니다.

그러나 Han이 의견에서 유쾌하게 지적한 것처럼 올바른 방법은 다음과 같습니다.

$("#mydropdownlist").get(0).selectedIndex = index_here;

@Nick Berardi가 제안한대로 변경된 값이 UI 프론트 엔드에 반영되지 않으면 다음을 시도하십시오.

$("#mydropdownlist").val("thevalue").change();

이 매우 간단한 접근법을 시도하십시오.

/*make sure that value is included in the options value of the dropdownlist 
e.g. 
(<select><option value='CA'>California</option><option value='AK'>Alaska</option>      </select>)
*/

$('#mycontrolId').val(myvalue).attr("selected", "selected");

드롭 다운이 Asp.Net 드롭 다운 인 경우 아래 코드가 정상적으로 작동합니다.

 $("#<%=DropDownName.ClientID%>")[0].selectedIndex=0;

그러나 DropDown이 HTML 드롭 다운 인 경우이 코드가 작동합니다.

 $("#DropDownName")[0].selectedIndex=0;

질문에 가장 적합한 답변 :

$("#comboboxid").val(yourvalue).trigger("chosen:updated");

예 :

$("#CityID").val(20).trigger("chosen:updated");

또는

$("#CityID").val("chicago").trigger("chosen:updated");

설정 값 및 업데이트 드롭 다운리스트 이벤트

$("#id").val("1234").change();

여러 가지 방법이 있습니다. 다음은 그중 일부입니다.

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

또는

$('select').prop('selectedIndex', 3);

나는 이것이 도움이 될 것이라고 생각한다.

    $.getJSON('<%= Url.Action("GetDepartment") %>', 
              { coDepartment: paramDepartment },
              function(data) {
                    $(".autoCompleteDepartment").empty();
                    $(".autoCompleteDepartment").append($("<option />").val(-1));
                    $.each(data, function() {
                        $(".autoCompleteDepartment").append($("<option />").val(this.CodDepartment).text(this.DepartmentName));
                    });
                    $(".autoCompleteDepartment").val(-1);                                       
              }  
             );

이렇게하면 텍스트가없는 요소를 추가 할 수 있습니다. 따라서 콤보를 클릭하면 콤보가 나타나지 않지만 나중에 값 -1을 사용하여 $ ( ". autoCompleteDepartment"). val (-1); 콤보에 유효한 값이 있는지 제어 할 수 있습니다.

그것이 누군가를 돕기를 바랍니다.

내 영어가 유감입니다.

드롭 다운 값을 설정 해야하는 경우 가장 좋은 방법은

$("#ID").val("2");

드롭 다운 값을 업데이트 한 후 스크립트를 트리거 해야하는 경우 드롭 다운에 onChange 이벤트를 설정하고 드롭 다운을 업데이트 한 후 실행하려면 다음과 같이 사용해야합니다.

$("#ID").val("2").change();

선택한 옵션을 빠르게 설정하는 기능은 다음과 같습니다.

function SetSelected(elem, val){
        $('#'+elem+' option').each(function(i,d){
        //  console.log('searching match for '+ elem + '  ' + d.value + ' equal to '+ val);
            if($.trim(d.value).toLowerCase() == $.trim(val).toLowerCase()){
        //      console.log('found match for '+ elem + '  ' + d.value);
                $('#'+elem).prop('selectedIndex', i);
            }
        });
    }

인수 요소 ID와 선택된 값으로이 함수를 호출하십시오. 이처럼 :

SetSelected('selectID','some option');

설정해야 할 선택 옵션이 많을 때 유용합니다.

<options ....></options>Ajax 호출로 모두로드하는 경우
다음 단계를 수행하십시오.

1).
예를 들어 드롭 다운 설정 값에 대한 별도의 방법을 만듭니다 .

function set_ip_base_country(countryCode)
    $('#country').val(countryCode)
} 

2). 모든 아약스 호출 성공 모든 HTML 추가 작업이 완료되면이 방법을 호출

예를 들어 :

success: function (doc) {
  .....
  .....
  $("#country").append('<option style="color:black;" value="' + key + '">'  +   value + '</option>')
  set_ip_base_country(ip_base_country)
}

drop-down selected값 설정 및 업데이트 변경

$("#PR2DistrictId option[value='@Model.PR2DistrictId']").attr("selected", true).trigger("chosen:updated")

여기서 우리는 먼저 Model선택한 값을 설정 하고 업데이트했습니다.

드롭 다운 목록의 // Html 형식

<select id="MyDropDownList">
<option value=test1 selected>test1</option>
<option value=test2>test2</option>
<option value=test3>test3</option>
<option value=test4>test4</option>

// javascript를 사용하여 선택한 항목을 test2로 변경하려는 경우. 이거 한번 해봐. // 다음 옵션을 설정하십시오.

var NewOprionValue = "Test2"

        var RemoveSelected = $("#MyDropDownList")[0].innerHTML.replace('selected', '');
        var ChangeSelected = RemoveSelected.replace(NewOption, NewOption + 'selected>');
        $('#MyDropDownList').html(ChangeSelected);

위의 강조 표시 / 확인 된 답변을 사용하면 나에게 도움이되었습니다 ... 여기에 약간의 통찰력이 있습니다. URL을 얻는 데 약간 바람을 피 웠지만 기본적으로 Javascript에서 URL을 정의 한 다음 위의 jquery 응답을 통해 URL을 설정합니다.

<select id="select" onChange="window.location.href=this.value">
    <option value="">Select a task </option>
    <option value="http://127.0.0.1:5000/choose_form/1">Task 1</option>
    <option value="http://127.0.0.1:5000/choose_form/2">Task 2</option>
    <option value="http://127.0.0.1:5000/choose_form/3">Task 3</option>
    <option value="http://127.0.0.1:5000/choose_form/4">Task 4</option>
    <option value="http://127.0.0.1:5000/choose_form/5">Task 5</option>
    <option value="http://127.0.0.1:5000/choose_form/6">Task 6</option>
    <option value="http://127.0.0.1:5000/choose_form/7">Task 7</option>
    <option value="http://127.0.0.1:5000/choose_form/8">Task 8</option>
</select>
<script>
    var pathArray = window.location.pathname.split( '/' );
    var selectedItem = "http://127.0.0.1:5000/" + pathArray[1] + "/" + pathArray[2];
    var trimmedItem = selectedItem.trim();
    $("#select").val(trimmedItem);
</script>

부트 스트랩을 사용 $(#elementId').selectpicker('val','elementValue')하는 사람들 대신에$('#elementId').val('elementValue') 은 UI의 값을 업데이트하지 않으므로 하십시오.

참고 : .change()일부 답변에서 위에서 제안한 것처럼 기능 조차도 작동하지만 $('#elementId').change(function(){ //do something })기능을 트리거합니다 .

나중에이 스레드를 참조하는 사람들을 위해 이것을 게시하십시오.