Đặt tùy chọn đã chọn của hộp chọn

Tôi muốn đặt một tùy chọn đã được chọn trước đó để được hiển thị khi tải trang. Tôi đã thử nó với đoạn mã sau:

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

với

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

Dường như không hiệu quả. Có ý kiến ​​gì không?

Điều này chắc chắn nên làm việc. Đây là một bản demo . Hãy chắc chắn rằng bạn đã đặt mã của mình vào $(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);

Tôi đã tìm thấy bằng cách sử dụng phương thức jQuery .val () để có một nhược điểm đáng kể.

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

Nếu hộp chọn này (hoặc bất kỳ đối tượng nhập nào khác) ở dạng và có nút đặt lại được sử dụng trong biểu mẫu, khi nhấp vào nút đặt lại, giá trị cài đặt sẽ bị xóa và không được đặt lại về giá trị ban đầu như bạn mong đợi.

Điều này dường như làm việc tốt nhất cho tôi.

Cho chọn hộp

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

Đối với đầu vào văn bản

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

Đối với đầu vào textarea

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

Đối với hộp kiểm

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

Đối với các nút radio

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

Điều đó làm việc tốt. Xem câu đố này: http://jsfiddle.net/kveAL/

Có thể là bạn cần khai báo jQuery của bạn trong một $(document).ready()trình xử lý?

Ngoài ra, bạn có thể có hai yếu tố có cùng ID không?

Đây sẽ là một lựa chọn khác:

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

Tôi đã từng gặp vấn đề tương tự.

Giải pháp: thêm làm mới.

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

Tôi biết có một số lần lặp lại câu trả lời nhưng bây giờ điều này không yêu cầu jquery hoặc bất kỳ thư viện bên ngoài nào khác và có thể được thực hiện khá dễ dàng chỉ với những điều sau đây.

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>

Một số trường hợp có thể

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

Vấn đề của tôi

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

Tôi gặp vấn đề tương tự . Điểm khác biệt duy nhất so với mã của bạn là tôi đã tải hộp chọn thông qua cuộc gọi ajax và ngay khi cuộc gọi ajax được thực thi, tôi đã đặt giá trị mặc định của hộp chọn

Giải pháp

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

Tôi gặp vấn đề trong đó giá trị không được đặt do lỗi cú pháp trước cuộc gọi.

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

Kiểm tra lỗi cú pháp trước cuộc gọi.

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

Ngoài ra @icksde và @Korah (cả hai!)

Khi xây dựng các tùy chọn với AJAX , tài liệu. Đã có thể được kích hoạt trước khi danh sách được tạo, vì vậy

Điều này không làm việc

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

Cái này không

Thời gian chờ không hoạt động nhưng như @icksde nói rằng nó rất mong manh (tôi thực sự cần 20ms thay vì 10ms). Tốt hơn là nên lắp nó bên trong hàm AJAX như thế này:

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