Làm thế nào để mở Chosen qua JavaScript?

Question

Tôi cần mở Chosen dropdown qua JavaScript để người dùng không phải nhấp vào lựa chọn để hiển thị nó, làm thế nào điều này có thể được thực hiện?

Answer 1

này giải quyết vấn đề,

chỉ cần đảm bảo chzn-chọn là ID của chọn của bạn .

chzn thả sẽ ở lại mở sau khi người dùng nhấp vào một tùy chọn:

 $('#chzn-select').change(function(event) 
     { 
      $('.chzn-drop').css('left', 0); 
     }); 

Answer 2

Bạn có thể mở một chọn chọn hộp qua JS bằng cách thực hiện:

$('#<id-of-your-select>_chzn').trigger('mousedown'); 

nơi <id-of-your-select> là id của nguyên tố <select> của bạn.

Đối với ví dụ: nếu yếu tố <select> bạn cũng giống như <select id="foo" ...>, sau đó các mã trên sẽ trở thành:

$('#foo_chzn').trigger('mousedown'); 

Answer 3

@ câu trả lời tzvi là có giá trị trong trong trường hợp bạn đang cố gắng để kích hoạt chọn sao cho nó vẫn mở sau một lựa chọn được thực hiện (IE: thực hiện nhiều lựa chọn trong một lần). Cho phép tôi mở rộng này một chút (cập nhật cho chọn 1.0, bằng cách này):

$('#selectbox').change(function() { 
    $('#selectbox_chosen .chosen-drop').css('left', '0'); 
}); 

$('html').click(function() { 
    $('#selectbox_chosen .chosen-drop').css('left', ''); 
}); 

$('#selectbox_chosen .chosen-drop').click(function(e) { 
    e.stopPropagation(); 
}); 

Về cơ bản nó buộc thả xuống chọn để ở lại mở bằng cách ghi đè một số css đó là thường tại chỗ bởi lớp "hoạt động". Sau đó, chúng tôi có một vài sự kiện nhấp chuột sẽ hoàn tác việc này nếu bạn nhấp vào bất kỳ nơi nào bên ngoài menu thả xuống. Làm việc hoàn hảo cho tôi.

Edit: Bằng cách này, nếu bạn thực sự muốn kích hoạt thả xuống qua JS, sử dụng Chosen 1.0 của API:

$('#selectbox').trigger('chosen:open') 

Trong bối cảnh của câu hỏi ban đầu, điều này sẽ cho phép bạn mở hộp hoặc mở lại hộp sau khi lựa chọn được thực hiện. Nó sẽ không, tuy nhiên, giữ cho hộp mở sau khi một lựa chọn được thực hiện (mà không đóng cửa cho một thời điểm).

Answer 4

bạn có thể thêm hai dòng dưới đây vào mã của bạn nó sẽ giữ cho lựa chọn của bạn luôn mở. Nó làm việc cho tôi.

list_start là id phần tử lựa chọn của bạn.

("#list_start").trigger('chosen:open'); 
$('.chosen-drop').css('left', 0); 

Answer 5

Trong cập nhật Chosen jquery plugin hoạt động tốt với stopPropagation.

$("#selectbox").trigger("chosen:open"); \t \t \t 
 
event.stopPropagation();

$(document).ready(function() { 
 
    $("#selectbox").chosen({}); 
 
    $("button").click(function() { 
 
    $("#selectbox").trigger("chosen:open"); 
 
    event.stopPropagation(); 
 
    }); 
 
});

#selectbox { 
 
    width: 140px 
 
}

<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script> 
 

 

 
<select id="selectbox"> 
 
    <option val="option1">Option 1</option> 
 
    <option val="option2">Option 2</option> 
 
    <option val="option3">Option 3</option> 
 
    <option val="option4">Option 4</option> 
 
    <option val="option5">Option 5</option> 
 
    <option val="option6">Option 6</option> 
 
</select> 
 

 

 
<button>Trigger Chosen</button>

Answer 6

Nó rất kỳ lạ nhưng tôi tìm thấy câu trả lời là sử dụng thời gian chờ

nó bằng cách nào đó neet để timeout đầu tiên có lẽ vì yếu tố của tôi là nhân bản hy vọng hữu ích cho r khác

setTimeout(function(){ firstElement.trigger("chosen:open"); }, 100);