CODEWITHSUNDEEP
jqueryformsonload
Ross
Ross

Reputation: 183

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>

Upvotes: 18

Views: 16413

Answers (8)

wi77Code
wi77Code

Reputation: 1

I know this is an old post... but for what it's worth the following is an option as well...

  $('select').chosen().on('chosen:showing_dropdown', function () {
        //do something
    })

Upvotes: 0

Siddiqui Noor
Siddiqui Noor

Reputation: 7986

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.

Upvotes: 0

Drew Johnson
Drew Johnson

Reputation: 19213

In Chosen 1.0, this command is now:

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

See here.

Upvotes: 32

InGeek
InGeek

Reputation: 2682

this is what worked for me

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

Upvotes: 0

J F
J F

Reputation: 111

This worked for me:

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

or shorten it to 

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

Upvotes: 2

Eduardo Coasaca
Eduardo Coasaca

Reputation: 21

<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

Upvotes: 2

Achinth Gurkhi
Achinth Gurkhi

Reputation: 2156

This fixes the issue completely for me:

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

Upvotes: 0

noob
noob

Reputation: 9202

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

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

Upvotes: 2

Related Questions