248

Tôi có một hộp chọn:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

Tôi muốn đặt một trong các tùy chọn là "được chọn" dựa trên chỉ mục được chọn.

Ví dụ: nếu tôi đang cố gắng đặt "Số 3", tôi đang thử điều này:

$('#selectBox')[3].attr('selected', 'selected');

Nhưng điều này không làm việc. Làm cách nào tôi có thể đặt tùy chọn như được chọn dựa trên chỉ mục của nó bằng jQuery?

Cảm ơn!

|
434

LƯU Ý : câu trả lời phụ thuộc vào jQuery 1.6.1+

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

Cảm ơn vì nhận xét, .getsẽ không hoạt động vì nó trả về phần tử DOM, không phải phần tử jQuery. Hãy nhớ rằng .eqchức năng cũng có thể được sử dụng bên ngoài bộ chọn nếu bạn thích.

$('#selectBox option').eq(3).prop('selected', true);

Bạn cũng có thể dễ đọc / dễ đọc hơn nếu bạn muốn sử dụng giá trị , thay vì dựa vào việc chọn một chỉ mục cụ thể :

$("#selectBox").val("3");

Lưu ý: .val(3) hoạt động tốt cho ví dụ này, nhưng các giá trị không phải là số phải là chuỗi, vì vậy tôi đã chọn một chuỗi để thống nhất.
(ví dụ: <option value="hello">Number3</option>yêu cầu bạn sử dụng .val("hello"))

|
  • 1

    +1 - Tùy chọn thứ hai làm việc cho tôi. Câu trả lời được chọn của John Kugelman không phù hợp với tôi trong IE7.

    – Hoàng Vân Thường 17:44:27 27/06/2011
  • 1

    Đáng buồn thay, không có cách nào trong số này kích hoạt một sự kiện thay đổi () cho tôi. Tôi có $ ('# selectBox'). Change (function () {alert ('đã thay đổi')});

    – Tạ Mộng Nhi 17:44:59 26/09/2011
  • 1

    @mikejones - đó là theo thiết kế. Khi bạn lập trình cài đặt tùy chọn đã chọn, bạn không phải lúc nào cũng muốn sự kiện thay đổi ràng buộc được kích hoạt (như trên sự kiện tải trang.) Để giải quyết vấn đề đó, hãy để nhà phát triển quyết định. Trong trường hợp của bạn, bạn chỉ cần gọi $ ('# selectBox'). Change (); sau khi bạn đã gọi $ ('# selectBox'). val ("3");

    – Dương Mộng Vân 18:54:18 29/09/2011
  • 1

    Là lựa chọn đầu tiên 0 hay 1?

    – Bùi Bạch Điệp 20:55:26 01/05/2013
  • 1

    Tôi nghĩ rằng đáng để đề cập rằng post-jQuery 1.6.1, phương pháp được đề xuất để sửa đổi các thuộc tính boolean của một phần tử là .prop()hơn .attr().

    – Lý Tâm Nhi 15:19:30 01/07/2013
114

Điều này cũng có thể hữu ích, vì vậy tôi nghĩ rằng tôi nên thêm nó ở đây.

Nếu bạn muốn chọn một giá trị dựa trên giá trị của mặt hàng đó chứ không phải chỉ mục của mặt hàng đó thì bạn có thể làm như sau:

Danh sách lựa chọn của bạn:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

Câu đố:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

Mục được chọn sẽ là "Số 2".

|
  • 1

    lưu ý: có thêm dấu gạch dưới sau $ () ... nếu không, điều này hoạt động rất tuyệt vời

    – Hoàng Vân Thường 07:49:48 10/10/2010
  • 1

    +1 Tôi không thể làm cho nó hoạt động chính xác, nhưng từ đó cuối cùng tôi đã làm cho nó hoạt động với cú pháp sau: $ ("# selectBox tùy chọn [value = 'C']") [0] .selected = true;

    – Tạ Mộng Nhi 02:59:22 10/06/2011
  • 1

    Chỉ cần lưu ý rằng .attr('selected', 'selected')không nên sử dụng nhiều lần trên cùng một lựa chọn, vì một số trình duyệt có thể bị lẫn lộn (trong một số trường hợp, chúng bắt đầu đánh dấu một số mục trong dom selected=selected". nhấp) sử dụng .prop('selected', true)theo đề xuất của Marc. - Chỉ là có rất nhiều đau đớn - và lãng phí thời gian - vì vấn đề này!

    – Dương Mộng Vân 14:16:15 20/08/2013
63

Hãy thử điều này thay thế:

$("#selectBox").val(3);

Ngoài ra, hãy xem nếu điều này giúp bạn:

http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/

|
47

Thậm chí đơn giản hơn:

$('#selectBox option')[3].selected = true;
|
  • 1

    Điều này làm việc cho tôi, tôi cũng cần phải chọn bởi INDEX chứ không phải GIÁ TRỊ.

    – Trịnh Ngọc Thy 21:51:47 01/05/2012
  • 1

    Câu trả lời này đã cho tôi những gì tôi cần .. Tôi đã thiếu phần 'tùy chọn' của bộ chọn khi cố gắng chọn theo tên $ ('select [name = "select_name"]) [index] .selected = true;

    – Huỳnh Trường Phu 04:16:47 09/08/2013
16
# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

khi bạn muốn chọn với các cách hàng đầu cho lựa chọn thiết lập, bạn có thể sử dụng
$('#select option').removeAttr('selected');để xóa các lựa chọn trước đó.

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();
|
  • 1

    +1 cho: $ ('# chọn tùy chọn'). RemoveAttr ('đã chọn'); tùy chọn đơn giản nhất để trả mục 'đã chọn' lên đầu hoặc không có lựa chọn xác định.

    – Trịnh Ngọc Thy 16:44:09 29/06/2015
11

Điều quan trọng cần hiểu là val()đối với một selectphần tử trả về giá trị của tùy chọn đã chọn, nhưng không phải là số phần tử như selectedIndextrong javascript.

Để chọn tùy chọn với value="7"bạn chỉ cần sử dụng:

$('#selectBox').val(7); //this will select the option with value 7.

Để bỏ chọn tùy chọn, sử dụng một mảng trống:

$('#selectBox').val([]); //this is the best way to deselect the options

Và tất nhiên bạn có thể chọn nhiều tùy chọn *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* Tuy nhiên, để chọn nhiều tùy chọn, <select>phần tử của bạn phải có MULTIPLEthuộc tính, nếu không nó sẽ không hoạt động.

|
10

Tôi luôn gặp vấn đề với prop ('được chọn'), những điều sau đây luôn có tác dụng với tôi:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');
|
8

Thử đi:

$('select#mySelect').prop('selectedIndex', optionIndex);

Cuối cùng, kích hoạt một sự kiện .change:

$('select#mySelect').prop('selectedIndex', optionIndex).change();
|
6

Hy vọng điều này có thể giúp quá

$('#selectBox option[value="3"]').attr('selected', true);
|
4

chọn tùy chọn thứ 3

$('#selectBox').val($('#selectBox option').eq(2).val());

Ví dụ trên jsfiddle

|
4

Thuộc tính javascript được chọn thuần túy là cách phù hợp bởi vì đó là javascript thuần và hoạt động trên nhiều trình duyệt:

$('#selectBox')[0].selectedIndex=4;

Dưới đây là bản demo jsfiddle với hai lần thả xuống sử dụng một để đặt cái khác:

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

Bạn cũng có thể gọi điều này trước khi thay đổi chỉ số được chọn nếu thuộc tính bạn muốn là thuộc tính "được chọn" trên thẻ tùy chọn ( đây là fiddle ):

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');
|
4

Trong 1.4.4, bạn gặp lỗi: $ ("# selectBox tùy chọn") [3] .attr không phải là một hàm

Những công việc này: $('#name option:eq(idx)').attr('selected', true);

Trường hợp #nameđược chọn id và idxlà giá trị tùy chọn bạn muốn chọn.

|
4

Để làm rõ câu trả lời của Marc và John Kugelman, bạn có thể sử dụng:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() sẽ không hoạt động nếu được sử dụng theo cách được chỉ định vì nó nhận được đối tượng DOM, không phải đối tượng jQuery, vì vậy giải pháp sau sẽ không hoạt động:

$('#selectBox option').get(3).attr('selected', 'selected')

eq()được các bộ lọc jQuery thiết lập thành phần tử với chỉ mục được chỉ định. Nó rõ ràng hơn $($('#selectBox option').get(3)). Nó không hiệu quả lắm. $($('#selectBox option')[3])là hiệu quả hơn (xem trường hợp thử nghiệm ).

Bạn thực sự không cần đối tượng jQuery. Điều này sẽ thực hiện các mẹo:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

Một điểm cực kỳ quan trọng khác:

Thuộc tính "được chọn" không phải là cách bạn chỉ định nút radio đã chọn (ít nhất là trong Firefox và Chrome). Sử dụng thuộc tính "đã kiểm tra":

$('#selectBox option')[3].checked = true;

Các hộp kiểm cũng vậy.

|
4

Lưu ý:

$('#selectBox option')[3].attr('selected', 'selected') 

là không chính xác, việc trì hoãn mảng đưa bạn trở thành đối tượng dom, không phải là đối tượng jquery, do đó, nó sẽ thất bại với TypeError, ví dụ như trong FF với: "$ ('# selectBox tùy chọn') [3] .attr () không phải là một hàm . "

|
2
//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });
|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.