0

How will I open the option list of an HTML select box from another HTML control?

For instance, I've the following code.

HTML

<select>
    <option>Select</option>
    <option>Male</option>
    <option>Female</option>
</select>

<span>Click Here</span> to select an open from the option box.

SCRIPT

$('span')
    .bind('click', function(){
        $('select').trigger('click');
    });
Rupam Datta
  • 1,849
  • 1
  • 21
  • 36
  • 2
    You can't really. There are some hacks, and it is somewhat possible, but a lot more complicated than you'd think. – adeneo Feb 13 '13 at 12:40
  • 1
    very limited in what you can do with a `select` which is why so many plugins exist to replace them – charlietfl Feb 13 '13 at 12:40
  • possible duplicate of [Simulate click on select element with jQuery](http://stackoverflow.com/questions/13234971/simulate-click-on-select-element-with-jquery) – adeneo Feb 13 '13 at 12:42

2 Answers2

0

It is not possible. The best way is to create your own fake select box.

Chosen for example is a framework for implementing such fake selcet boxes.

Philipp Hofmann
  • 3,388
  • 26
  • 32
-2
<select>
    <option>Select</option>
    <option value='0'>Male</option>
    <option value='1'>Female</option>
</select>

<span>Click Here</span> to select an open from the option box.

$('span')
    .bind('click', function(){
        $('select').trigger('change');
    });

$('select').change(function(){
    $(this).val(0); // select male 
});

you must use change instead of click event.

You may want to pass a parameter, whenever you are triggering the event, to select the right option.

tank
  • 319
  • 6
  • 15
  • You need to define what you want to do when the change event is called. – tank Feb 13 '13 at 13:07
  • This is still not what the question is about. The select list should open when the span is clicked, and the user selects whatever option they want. The option should not change automatically. – JJJ Feb 13 '13 at 13:50