선택 상자의 선택 옵션 설정

선택 상자의 선택 옵션 설정

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

$("#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);

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

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

이는 또 다른 옵션입니다.

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

그것은 잘 작동합니다.이 바이올린을 참조하십시오. http://jsfiddle.net/kveAL/

당신은 당신의 jQuery를 다음과 같이 선언해야 할 수 있습니다.$(document).ready()핸들러?

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

저도 같은 문제가 있었습니다.

해결책: 새로 고침을 추가합니다.

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

경우에 따라 달라질 수 있습니다.

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

답변이 여러 번 반복되는 것은 알고 있지만 이제는 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").val("gateway_2")

이 선택 요소가 JQuery UI 또는 다른 JQuery 래퍼를 사용하는 경우 래퍼의 새로 고침 방법을 사용하여 값이 선택되었음을 표시하도록 UI를 업데이트합니다.다음 예제는 JQueryUI에 대한 것이지만 올바른 새로 고침 방법을 결정하려면 사용 중인 래퍼에 대한 설명서를 살펴봐야 합니다.

$("#gate").selectmenu("refresh");

변경 이벤트와 같이 트리거해야 하는 이벤트가 있는 경우 값을 변경해도 이벤트가 실행되지 않으므로 수동으로 트리거해야 합니다.실행해야 하는 이벤트는 이벤트가 생성된 방법에 따라 달라집니다.

이벤트가 $("#gate").on("change", function(){})과 같은 JQuery로 생성된 경우 다음 방법을 사용하여 이벤트를 트리거합니다.

$("#gate").change();

이벤트가 표준 JavaScript 이벤트(즉, 다음 방법을 사용하여 생성된 경우 이벤트를 트리거합니다.

var JSElem = $("#gate")[0];
if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    JSElem.dispatchEvent(evt);
} else {
    JSElem.fireEvent("onchange");
}

나의 문제

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

저도 같은 문제가 있었습니다.당신의 코드와 유일한 차이점은 Ajax 호출을 통해 선택 상자를 로드하고 있었고 Ajax 호출이 실행되자마자 선택 상자의 기본값을 설정했다는 것입니다.

해결책

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

$(document).ready(function() {
  $('#selectBoxId option[value="val2"]').prop('selected', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectBoxId">
  <option value="val1">Option1</option>
  <option value="val2">Option2</option>
  <option value="val3">Option3</option>
</select>

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

$("#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');
});

@icicksde와 @Korah(둘 다!)에 추가.

AJAX로 옵션을 빌드할 때 목록이 빌드되기 전에 document.ready가 트리거될 수 있으므로 이를 통해 통찰력을 얻을 수 있습니다.

타임아웃은 효과가 있지만 @icksde가 말했듯이 취약합니다.다음과 같이 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");
});

언급URL : https://stackoverflow.com/questions/4680075/set-selected-option-of-select-box