jQuery Set Selected Option Sử dụng Next

Question

Làm cách nào để sử dụng jQuery, đặt mục "tiếp theo" của một mục đã chọn là "đã chọn".

Ví dụ, nếu tôi có:

<select> 
<option value="1" >Number 1</option> 
<option value="2" selected="selected">Number 2</option> 
<option value="3" >Number 3</option> 
<option value="4" >Number 4</option> 
</select> 

Chúng ta có thể thấy rằng "Số 2" được chọn, và sử dụng jQuery, tôi muốn thiết lập "Số 3" như được lựa chọn, và loại bỏ các lựa chọn "thuộc tính" từ "Số 2". Tôi giả sử tôi cần phải sử dụng bộ chọn tiếp theo, nhưng tôi không hoàn toàn chắc chắn cách triển khai.

Answer 1

$('option:selected', 'select').removeAttr('selected').next('option').attr('selected', 'selected'); 

Kiểm tra ra mã làm việc ở đây http://jsbin.com/ipewe/edit

Answer 2

bạn có thể sử dụng

$('option:selected').next('option') 

hoặc

$('option:selected + option') 

Và thiết lập giá trị:

var nextVal = $('option:selected + option').val(); 
$('select').val(nextVal); 

Answer 3

Cập nhật:

Tính đến jQuery 1.6 + bạn nên sử dụng prop() thay vì attr() trong trường hợp này.

Sự khác biệt giữa các thuộc tính và thuộc tính có thể quan trọng trong các tình huống cụ thể là . Trước jQuery 1.6, phương thức .attr() đôi khi tính đến các giá trị thuộc tính khi truy xuất một số thuộc tính, có thể gây ra hành vi không nhất quán. Kể từ jQuery 1.6, phương thức .prop() cung cấp một cách để truy lục một cách rõ ràng các giá trị thuộc tính, trong khi .attr() truy lục các thuộc tính.

var theValue = "whatever"; 
$("#selectID").val(theValue).prop('selected',true); 

gốc trả lời:

Nếu bạn muốn chọn bởi giá trị của các tùy chọn, bất kể vị trí của nó (ví dụ này giả sử bạn có một ID cho lựa chọn của bạn):

var theValue = "whatever"; 
$("#selectID").val(theValue).attr('selected',true); 

Bạn không cần phải "bỏ chọn". Điều đó xảy ra tự động khi bạn chọn một cái khác.

Answer 4

Và nếu bạn muốn xác định chọn ID:

$("#nextPageLink").click(function(){ 
    $('#myselect option:selected').next('option').attr('selected', 'selected'); 
    $("#myselect").change(); 
}); 

Nếu bạn bấm vào mục với id "nextPageLink", tùy chọn tiếp theo sẽ được lựa chọn và onChange() Sự kiện này sẽ được gọi. Nó có thể trông giống như sau:

$("#myselect").change(function(){ 
    $('#myDivId').load(window.location.pathname,{myvalue:$("select#myselect").val()}); 
}); 

Sự kiện OnChange() sử dụng Ajax để tải thứ gì đó vào div được chỉ định.

window.location.pathname = địa chỉ thực tế

Sự kiện OnChange() được xác định bởi vì nó cho phép bạn thay đổi giá trị không chỉ bằng cách sử dụng nút netx/prev mà trực tiếp sử dụng lựa chọn chuẩn. Nếu giá trị được thay đổi, trang sẽ tự động thực hiện.

Answer 5

Tìm hàng, sau đó

var row = $('#yourTable'); 

giá trị mà bạn muốn chọn

var theValue = "5"; 
row.find("select:eq(2)").find("option[value="+theValue+']').attr('selected','selected'); 

Answer 6

$('#next').click(function(){ 
    $('#colored_background option:selected').next('option').attr('selected', 'selected'); 
    changeBackgroundColor(); 
}); 

Làm việc tại What is my favorite color?. Nhấp vào mũi tên.

Answer 7

Từ phiên bản 1.6.1 trên, đó là khuyến khích sử dụng các phương pháp chống đỡ cho các thuộc tính boolean/tài sản như chọn, chỉ đọc, kích hoạt, ...

var theValue = "whatever"; 
$("#selectID").val(theValue).prop('selected',true); 

Mọi chi tiết, vui lòng tham khảo để http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Answer 8

Đây là những gì tôi chỉ cần sử dụng, tôi thích cách làm sạch nó là :-)

$('select').val(function(){ 
    var nextOption = $(this).children(':selected').next(); 
    return $(nextOption).val(); 
}).change(); 

Answer 9

$("select").prop("selectedIndex",$("select").prop("selectedIndex")+1) 

Answer 10

$('your_select option:selected').next('option').prop('selected', true) 

Answer 11

$('#my_sel').val($('#my_sel option:selected').next().val()); 
$('#my_sel').val($('#my_sel option:selected').prev().val());