/    Sign up×
Community /Pin to ProfileBookmark

Close SELECT Dropdown

Copy linkTweet thisAlerts:
Apr 13.2009

Hi, is there any way to close (or disable opening) when clicking dropdown menu of SELECT element? I need to make a special behavior on clicking with held CTRL – switch selectedIndex to a certain value without opening dropdown. To prevent opening the dropdown, I use selectelement.blur(), which works fine (dropdown blinks and closes immediately, it is acceptable for me) in IE7+, Opera and FF, but has no effect in IE6. So is there any cleaner solution also for older browsers?

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@WasifApr 13.2009 — Well the way to disable opening it is pretty simple, here goes:

[code=html]<select style="disabled:disabled">
<option>blah1</option>
<option>blah2</option>
<option>blah3</option>
</select>[/code]

Tell me if it helps.
Copy linkTweet thisAlerts:
@dmboydApr 13.2009 — What about the following:
&lt;select name="selectList" multiple="multiple"&gt;
&lt;option value="option1"&gt;Option 1&lt;/option&gt;
&lt;option value="option2"&gt;Option 2&lt;/option&gt;
&lt;option value="option3"&gt;Option 3&lt;/option&gt;
&lt;/select&gt;
??

Also, there is no 'disabled' property in CSS. I believe what was mentioned by Wasif should actually be:
&lt;select disabled="disabled"&gt;

Wasif was right about that disabling the control, but if you want to select multiple things at once (Ctrl-click), disabling it would be a bad idea. :p
Copy linkTweet thisAlerts:
@amxauthorApr 13.2009 — It cannot be disabled permanently because when CTRL is not pressed it has to be normally opened, I need to decide if to open or not during onclick. When I disable and immediately enable the select, it is the same as onblur - works in IE7 FF O, fails in IE6.
Copy linkTweet thisAlerts:
@WasifApr 13.2009 — oops yeah lol

i thought it was css

its been such a while
Copy linkTweet thisAlerts:
@dmboydApr 13.2009 — Have you tried the suggestion with <select multiple="multiple"> that I posted above?

[code=html]<select name="selectList" multiple="multiple">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>[/code]

People can hold Ctrl and click to select multiple items. Is that close to what you're looking for?
Copy linkTweet thisAlerts:
@amxauthorApr 13.2009 — dmboyd: my problem is completely different, sorry but I think you have just read "CTRL" and imagined something about multiple selection. It is completely off-topic and has nothing to do with my problem.
Copy linkTweet thisAlerts:
@dmboydApr 13.2009 — dmboyd: my problem is completely different, sorry but I think you have just read "CTRL" and imagined something about multiple selection. It is completely off-topic and has nothing to do with my problem.[/quote]
Ah, my apologies. Usually the Ctrl key when used with SELECT elements is used to select multiple items.

As for your problem, I don't think I'm really understanding since selectedIndex changes as soon as you select an option. Why would you need the Ctrl key?
Copy linkTweet thisAlerts:
@amxauthorApr 13.2009 — I will try to explain it better. For example, I will have select consisting of Apple, Banana and Melon. If user just clicks it, he can normally select an option. If user holds ctrl and clicks the select (it is NOT in multiple mode and has not to be), Melon is selected and no dropdown is opened.

The reason is I have multiple similar selects on one page and I want to allow user simply repeat his choice. I can handle it with a button next to the select, but the user I'm creating the program for wants it that way I described. (Ctrl is not neccessary, but Shift will have another similar functionality and Alt is the worst because it activates browser menu bar, so I have chosen CTRL cause the selects aren't multiple).
×

Success!

Help @amx spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.12,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...