Select and open a SELECT element from other event

Question

Possible Duplicate:
Can I open a dropdownlist using jQuery

Want to open a dropdown, on clicking on a textarea- is it possible?

I am currently trying in jquery-mobile, & want to open the SELECT-BOX in iPhone/Android device.

Here is my code-

JS:

function showScoopCategory()
{
    console.log('showScoopCategory');
    $('#scoopCategory').click();  // Not opening the dropdown
}

HTML:

<select id="scoopCategory" name="grievence">
    <option value="1">Option One</option>
    <option value="2">Option Two</option>
    <option value="3">Option Three</option>
</select>
...
<textarea id="scoopCategoryText" placeholder="Select & Open Dropdown" onClick="showScoopCategory();"></textarea>

Nope. Not the same. Here want to open native Select-Box in iPhone/Android. - which should be a bit easier. — Avisek Chakraborty, Mar 07 '12 at 16:00

score 2 · Answer 1 · answered Mar 06 '12 at 21:56

I don't think you can open it like a normal click would. However, you could increase the size of it.

$('#scoopCategoryText').on('focus', function() {
    var $sCategory = $('#scoopCategory'),    
        numCategories = $sCategory.find('option').length;

    console.log('showScoopCategory');
    $sCategory.attr('size', numCategories);          
}).on('blur', function() {
    $('#scoopCategory').attr('size', 1);
});

You could also make a mock dropdown with HTML and CSS, but getting it just right won't be quick and easy.

actually, its in Jquery mobile, and need to open the dropdown in native in iPhone & Android — Avisek Chakraborty, Mar 07 '12 at 07:46

score 1 · Accepted Answer · answered Mar 07 '12 at 15:25

1

setting focus() to the SELECT element, is working in iPhone.

But at first, its opening the keypad for textarea, then it removes it & shows the Select box.

So, am planning to remove the textarea, and design a div like textarea there. So, onClick it will not open a keypad & it can directly open the Select-Box.

function showScoopCategory()
{
    console.log('showScoopCategory');
    $('#scoopCategory').focus();   // opening keypad, then removes it & opens Select box
}

answered Mar 07 '12 at 15:25

Avisek Chakraborty

8,229
10
48
76

& its worked. Changed the to a <div> having similar design & change the focus to <select> on click on that <div></div></select></div> – Avisek Chakraborty Mar 07 '12 at 16:02

Select and open a SELECT element from other event

2 Answers2