使用jQuery打开选择框选项

Question

I want to show selectbox option using jquery when the page loads. I have used .simulate() and .trigger function but it's not working, so can you please suggest some solution for that.

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="simulate.js"></script>
<script>
$(document).ready(function(){
    $("#test").simulate('mousedown'); // not working
    $("#test").trigger('click'); // not working
    //$("#test").attr('size',3); // size is not as i need. i want to display option as any dropdown shows.
});
</script>

<select id="test">
   <option value="0">select option</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

Please help me to out from this problem...

Answer 1

It's not possible to open a selectbox with JavaScript. I tried and got disappointed. I finally changed the attribute size for the select box so it appears to be open:

$('#test').attr('size',3);

and then when you're finished

$('#test').attr('size',0);

Hope that helps :)

Answer 2

Try this...

$(document).ready(function(){

    var myDropDown=$("#test");
    var length = $('#test> option').length;
    myDropDown.attr('size',length);
    $("#test").click(function(){
        myDropDown.attr('size',0);
    }); 

});

Answer 3

I think it's not possible. There's a lot of jQuery plugins out there to enhance the native select's functionality, like the Selectmenu Widget of jQuery UI which has an "open" method:

http://api.jqueryui.com/selectmenu/#method-open

or for Twitter Bootstrap:

http://silviomoreto.github.io/bootstrap-select/methods/#selectpickershow

just to name some...