Làm thế nào để chọn một tùy chọn trong một jQuery ui selectmenu động?

Question

Sau khi thay đổi một menu từ một lựa chọn thông thường sang một trình đơn chọn jQuery, tôi không còn có thể chọn các tùy chọn trong đó theo chương trình. Có cách nào để làm việc này không?

Mã để chọn được (giả sử ListId là Id thực tế của danh sách)

$('#ListId').val(value); 

Các plugin được activited như thế này:

$("#ListId").selectmenu({ style: "dropdown", width:140 }); 

Có cách nào để chọn một mục trong menu chọn? Gọi cùng một hàm .val (value) chỉ chọn giá trị trong danh sách chọn ẩn ban đầu, không phải là jQuery selectmenu có kiểu dáng đẹp.

Answer 1

$('#ListId').selectmenu("value", value); 

Answer 2

Bạn có thể kích hoạt thêm các xử lý sự kiện thay đổi bằng cách thêm một cuộc gọi thay đổi:

$('#ListId').selectmenu("value", value); 
$('#ListId').selectmenu("change"); // Add this for a change event to occur 

Answer 3

Xin lưu ý bạn phải sử dụng chỉ số (không giá trị) để chọn tùy chọn sử dụng phương pháp này.

Ví dụ: với lựa chọn này.

<select id="ListId"> 
    <option value="value-one">One</option> 
    <option value="value-two">Two</option> 
</select> 

Trong trường hợp này, biểu thức $('#ListId').selectmenu("value", "value-two"); sẽ không trả lại bất kỳ kết quả nào. Thay vào đó, chúng ta phải sử dụng $('#ListId').selectmenu("value", "2");. Nói cách khác, chúng ta phải sử dụng vị trí/chỉ mục của phần tử bên trong lựa chọn. Không phải là giá trị!

Tìm chỉ mục dễ dàng. Bạn có thể sử dụng dòng sau để đạt được nó.

var index = $('#ListID option[value="value-two"]').index(); 
$('#ListId').selectmenu("value", index); 

Answer 4

Giả sử rằng bạn đã thực hiện phần này một lần trước:

$("#ListId").selectmenu({ style: "dropdown", width:140 }); 

tôi thấy công trình này:

$('#ListId').val(value); 
$('#ListId').selectmenu("refresh"); 

Điều này làm cho thả cách điệu xuống để hiển thị các giá trị chính xác.

Answer 5

Tôi đã thử những điều sau đây, và nó không hoạt động trong hoàn cảnh của tôi

1.

$('#ListId').val(value); 
$('#ListId').selectmenu("refresh"); 

2.

$('#ListId').selectmenu("value", value); 

3.

var option = $("#ListID option") 
option.attr("selected", true); 
// option.prop("selected", true); 
// option.attr("selected", "selected"); 
// option.prop("selected", "selected"); 
$('#ListId').selectmenu("refresh"); 

refresh , đã chọn .... v.v. và trong một số trường hợp nó không hoạt động.

Vì vậy, tôi nhấn ctrl + I trong chrome để xem mã nguồn. và tôi sử dụng mã sau để giải quyết tình huống của mình.

// Set Component Separator jQuery UI SelectMenu 
componentSeparatorPlaceHolder.find(".ui-selectmenu-text").html(inputComponentSeparatorStr); 
// Set ComponentSeparatorDropDown 
componentSeparator.val(inputComponentSeparatorStr); 

Answer 6

Tôi đã thử những cách sau đây, và nó làm việc trong hoàn cảnh của tôi

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

HOẶC

$('#ListId').prop('selectedIndex', 0);