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!

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

Đ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".

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

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

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

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

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

Đ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ưselectedIndex trong 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.

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

Thử cái này:

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

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

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

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

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

Ví dụ trên jsfiddle

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ụ trong FF với: "$ ('# selectBox tùy chọn') [3] .attr () không phải là hàm . "

Để 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ử có chỉ mục được chỉ định. Nó rõ ràng hơn $($('#selectBox option').get(3)). Đó không phải là tất cả hiệu quả. $($('#selectBox option')[3])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.

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.

Thuộc tính javascript được chọn thuần túy là cách phù hợp vì nó 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');

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

Tôi thường sử dụng kích hoạt ('thay đổi') để làm cho nó hoạt động

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

Ví dụ với id select = selectA1 và location_index = 0 (tùy chọn frist trong select):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

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

Khi sử dụng ở trên, tôi liên tục gặp lỗi trong webkit (Chrome):

"Uncaught TypeError: Object # không có phương thức 'attr'"

Cú pháp này dừng những lỗi đó.

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

Chọn mục dựa trên giá trị trong danh sách chọn (đặc biệt nếu các giá trị tùy chọn có dấu cách hoặc ký tự lạ trong đó) bằng cách thực hiện việc này:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

Ngoài ra, nếu bạn có một danh sách thả xuống (trái ngược với đa lựa chọn), bạn có thể muốn thực hiện break;để bạn không bị ghi đè giá trị đầu tiên được ghi đè.

Tôi cần một giải pháp không có giá trị mã hóa cứng trong tệp js; sử dụng selectedIndex. Hầu hết các giải pháp đưa ra đều thất bại một trình duyệt. Điều này dường như hoạt động trong FF10 và IE8 (có thể người khác kiểm tra trong các phiên bản khác)

$("#selectBox").get(0).selectedIndex = 1; 

Nếu bạn chỉ muốn chọn một mục dựa trên một thuộc tính cụ thể của một mục thì tùy chọn jQuery loại [prop = val] sẽ nhận được mục đó. Bây giờ tôi không quan tâm đến chỉ số tôi chỉ muốn mục theo giá trị của nó.

$('#mySelect options[value=3]).attr('selected', 'selected');

Tôi phải đối mặt với cùng một vấn đề. Đầu tiên bạn cần trải qua các sự kiện (tức là sự kiện nào đang diễn ra trước).

Ví dụ:

Sự kiện đầu tiên là tạo hộp chọn với các tùy chọn.

Sự kiện thứ hai đang chọn tùy chọn mặc định bằng cách sử dụng bất kỳ chức năng nào như val (), v.v.

Bạn nên đảm bảo rằng sự kiện thứ hai sẽ xảy ra sau sự kiện đầu tiên .

Để đạt được điều này, hãy thực hiện hai chức năng, giả sử GenerSelectbox () (để chọn hộp chọn) và selectDefaultOption ()

Bạn cần đảm bảo rằng selectDefaultOption () chỉ được gọi sau khi thực hiện GenerSelectbox ()

Bạn cũng có thể khởi tạo nhiều giá trị nếu hộp chọn của bạn là bội số:

$('#selectBox').val(['A', 'B', 'C']);

bạn có thể tự động đặt giá trị biến chọn lọc cũng như tùy chọn sẽ được chọn. Bạn có thể thử mã sau

mã:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

MÃ HTML:

   <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> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

Ngắn gọn:

$("#selectBox").attr("selectedIndex",index)

trong đó chỉ mục là chỉ số được chọn là số nguyên.