...

View Full Version : attach onclick event to default dropdownlist value



kaanta
12-22-2010, 02:53 AM
i have a dropdownlist with some values,ex: One, Two and Three; One being the default value selected on load of dropdown list.

When I select Two or Three, there is onselectedchange event fired and I can write custom code in handler. But I also want to do some custom handling when page is loaded and user justs clicks on default value of "One". I want to take an action when user clicks on default value, "One" of dropdwn.

any suggestions/ideas?

Old Pedant
12-22-2010, 03:01 AM
Try using onblur instead of onchange, see if that works.

Philip M
12-22-2010, 09:33 AM
Try using onblur instead of onchange, see if that works.

That would only work when after the onblur the user clicks elsewhere on the page and moves the focus, and of course triggers the alert regardless of which option has been focused on. You cannot attach an onblur or onclick event to an individual select box option.


<form name='myform'>
<select name = 'list1' id = 'list1' onblur = "chk()">
<option selected value=""> Choose A Fruit</option>
<option value='Mango'> Mango </option>
<option value='Apple'> Apple </option>

</select>

<script type = "text/javascript">
function chk() {
alert ("Hello")
}
</script>

Why should the user click on the selected value of the option list if that is the option he desires? That is the whole point of setting an option to selected, i.e. the default. Why do you not simply get the value of the select list?

In other words, make the default option something like "Choose Something....." as above so the user is obliged to select an option.



All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Old Pedant
12-22-2010, 08:43 PM
Well, I was directly answering his requirement:
I want to take an action when user clicks on default value, "One" of dropdwn.

Yes, if the user never clicks on the <select>, at all, nothing will be triggered.

DJCMBear
12-22-2010, 09:13 PM
Try this out.

NOTE: Untested!



<form name="carForm">
<select name="car" id="car" onblur="chkVal(this)">
<option value="" selected="selected">Choose A Car</option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
</select>
</form>
<script type = "text/javascript">
function chkVal(o) {
if(o.options[o.selectedIndex].defaultSelected) {
alert("Default was selected");
}
}
</script>

Old Pedant
12-22-2010, 09:33 PM
HUH???

Options don't have a defaultValue. Did you mean defaultSelected???


if(o.options[o.selectedIndex].defaultSelected) {
... still on default option ...
}

DJCMBear
12-22-2010, 09:39 PM
Ahh yes thanks Old Pedant I think I was thinking of something else while I wrote it, I will change the code now.

Philip M
12-22-2010, 09:50 PM
Again, that would only work when after the onblur the user clicks elsewhere on the page and moves the focus.

DJCMBear
12-22-2010, 09:54 PM
Onchange triggers once the user has selected a different option with-in the selectbox and onblur will trigger if the user clicks on the select box to make it drop down then clicks somewhere else on the page so if you combined the two, so having both onchange and onblur wouldn't that make it trigger the even if the user clicks a different option or clicks anywhere else on the page?

DJCMBear
12-22-2010, 09:57 PM
A bit like this.



<form name="carForm">
<select name="car" id="carSelecter">
<option value="" selected="selected">Choose A Car</option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
</select>
</form>
<script type = "text/javascript">
function chkVal(o) {
if(o.options[o.selectedIndex].defaultSelected) {
alert("Default was selected");
}
}

window.onload = (function(){
var CS = document.getElementById('carSelecter');
if(CS) {
CS.onchange = CS.onblur = (function(){
return chkVal(this);
});
}
});
</script>

Philip M
12-23-2010, 09:05 AM
No difference. The alert is triggered only when the focus is moved by clicking elsewhere on the page.

The whole thing seems to me to be flawed. It is not expected behaviour for the user to click on an option, as opposed to selecting it in the usual way. Again, why should the user click on the default option?

DJCMBear
12-23-2010, 04:39 PM
I think what the OP is asking for is if the user clicks to open the dropdown but then doesn't change the selected option and clicks somewhere else to try and run a function to maybe stop the user from doing anything else unless they change the selected option, a bit like once you open it you have to select an option. Or that's what my guess was when reading the OPs post.

Philip M
12-23-2010, 06:30 PM
I think what the OP is asking for is if the user clicks to open the dropdown but then doesn't change the selected option and clicks somewhere else to try and run a function to maybe stop the user from doing anything else unless they change the selected option, a bit like once you open it you have to select an option. Or that's what my guess was when reading the OPs post.

Well the proper way is (as I say) to have a default

<option value = "">Make a choice....</option>.

DJCMBear
12-23-2010, 08:29 PM
That's how I would do it, plus also use selected="selected" but sometimes developers are trying to do something that I personally wouldn't do but if they need it I see it as a chance to help someone out.

Philip M
12-23-2010, 08:55 PM
That's how I would do it, plus also use selected="selected" but sometimes developers are trying to do something that I personally wouldn't do but if they need it I see it as a chance to help someone out.

Some developers are too inexperienced to recognise a bad idea, and it is not in their best interests to encourage them. How can the OP "need" this?

DJCMBear
12-23-2010, 09:09 PM
Thanks for saying im too experienced lol, but I do agree with you with using onchange only and leave the onblur but I was just suggesting codes that could work, many developers even yourself have given someone a code but also suggested a different way to do it or maybe not do it at all, but still give them the code anyway.

Many developers who come on this forum are beginners and ask for a code why not let them do the actions they want just to get them use to coding etc at the same time as giving suggestions on if its a good idea or not, the best way to learn is to experiment and comes with experience, so if a coder is coding an idea they have and needs help as it might be their first code ever they may never use the code or ever use the idea again but if they learn from it I don't see why I shouldn't help them out with the learning.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum