Jquery Chosen focus on page load (onLoad?)

问题:

I'm using the Jquery Chosen plugin on a select box, however I'd like to focus this on page load. I've used the following code to focus a text input:

onLoad="document.forms.sales_order_form.customer.focus()"

But this doesn't work for the select box:

<select data-placeholder="Select a Customer..." class="chzn-select" name="customer" style="width:400px;">
    <option value=""></option>
</select>

回答1:

In Chosen 1.0, this command is now:

$('.my_select_box').trigger('chosen:activate');

See here.

回答2:

If your using the first example (standard select box) you can use:

jQuery(document).ready(function($) {
    $('.chzn-drop .chzn-search input[type="text"]').focus();
})

回答3:

<select id="myselect">
    <option value="1">abc</option>
    <option value="2">def</option>
    <option value="3">ghi</option>
</select>

...

      $("#myselect_chzn").children('.chzn-drop').children('.chzn-search').children('input[type="text"]').focus();
      $("#myselect_chzn").addClass('chzn-container-active');

Chosen creates owns divs and converts your "select_ID" into "select_ID_chzn" for those divs

回答4:

This worked for me:

$("select.ProductIDDropDown").chosen();
$("select.ProductIDDropDown").trigger("liszt:activate");

or shorten it to

$("select.ProductIDDropDown").chosen().trigger("liszt:activate");

回答5:

This fixes the issue completely for me:

$('.chzn-drop .chzn-search input[type="text"]').focus();
$('.chzn-container').addClass('chzn-container-active');

回答6:

this is what worked for me

jQuery("#fltrPerson_chzn a").addClass("chzn-single-with-drop");
                        jQuery(".chzn-drop").css({
                            "left": "0px",
                            "top": "24px"
                        });

回答7:

I have been searching into StackOverflow for this solution to use in one of my project. After searching a lot I have learned something but have got no proper solution. Finally I have fixed my problem as follows:

I am using "jquery-1.10.2.min.js" and "Chosen v1.0.0". In my code I have <select id="sel_product"> and in jquery $("#sel_product").chosen(). For adding focus I have added '_chosen' after my ID of the element and call the following function:

$('#sel_product_chosen a.chosen-single').focus();

My final code is:

$(document).ready(function(){
    $("#sel_product").chosen();
    $('#sel_product_chosen a.chosen-single').focus();
});

Now it's working perfectly.