선택 상자의 선택된 옵션 설정

페이지로드시 표시되도록 이전에 선택된 옵션을 설정하고 싶습니다. 다음 코드로 시도했습니다.

$("#gate").val('Gateway 2');

와

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

그러나 이것은 작동하지 않습니다. 어떤 아이디어?

이것은 분명히 작동합니다. 여기 데모가 있습니다. 코드를 다음에 배치했는지 확인하십시오 $(document).ready.

$(function() {
    $("#gate").val('gateway_2');
});

$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});

$('#gate').val('Gateway 2').prop('selected', true);

jQuery .val () 메소드를 사용하여 중요한 단점을 발견했습니다.

<select id="gate"></select>
$("#gate").val("Gateway 2");

이 선택 상자 (또는 다른 입력 개체)가 양식에 있고 양식에 사용 된 재설정 버튼이있는 경우 재설정 버튼을 클릭하면 설정 값이 지워지고 예상대로 시작 값으로 재설정되지 않습니다.

이것은 나에게 가장 잘 작동하는 것 같습니다.

선택 상자

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);

텍스트 입력

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")

텍스트 영역 입력

<textarea id="gate"></textarea>
$("#gate").html("your desired value")

확인란의 경우

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);

라디오 버튼

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);

  $("#form-field").val("5").trigger("change");

잘 작동합니다. 이 바이올린을보십시오 : http://jsfiddle.net/kveAL/

$(document).ready()핸들러 에서 jQuery를 선언해야 합니까?

또한 동일한 ID를 가진 두 개의 요소가 있습니까?

이것은 다른 옵션입니다.

$('.id_100 option[value=val2]').prop('selected', true);

나는 같은 문제가 있었다.

해결 방법 : 새로 고침을 추가하십시오.

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');

여러 번 반복되는 답변이 있지만 지금은 jquery 또는 다른 외부 라이브러리가 필요하지 않으며 다음과 같이 쉽게 수행 할 수 있습니다.

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>

경우에 따라

$('#gate option[value='+data.Gateway2+']').attr('selected', true);

내 문제

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

나는 같은 문제가 있었다. 코드와의 유일한 차이점은 아약스 호출을 통해 선택 상자를로드하고 아약스 호출이 실행되는 즉시 선택 상자의 기본값을 설정했다는 것입니다

해결책

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);

호출 전에 구문 오류로 인해 값이 설정되지 않은 문제가있었습니다.

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

호출하기 전에 구문 오류를 확인하십시오.

$(function() {
$("#demo").val('hello');
});

// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});

@icksde 및 @Korah에 추가 (둘 다 둘 다!)

AJAX로 옵션 을 빌드 할 때 문서가 작성되기 전에 document.ready가 트리거 될 수 있습니다.

작동하지 않습니다

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

이것은 않습니다

시간 초과는 작동하지만 @icksde가 허약하다고 말합니다 (실제로 10ms 대신 20ms가 필요했습니다). 다음과 같이 AJAX 함수에 맞추는 것이 좋습니다.

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});