We Keep Coding

Select drop-list item without triggering onchange event?

I want to populate a drop-list with several items and select a default item:
<select onchange="DoSomething(this)">
<option value="abb">This is the second item</option>
<option value="abc" selected>This is the third item</option>
etc...
</select>
However I don't want the onChange event to fire (or I want the code triggered by onChange to be ignored) until the user selects an item. At the moment the onChange event fires as the page loads and the selected item is chosen by default.
Can I wrap this code in PHP to achieve this - if so how?

?!
Manipulating the HTML DOM directly in JavaScript doesn't fire events. You can even call myForm.submit() and the browser will not fire the form's onsubmit event, therefore bypassing client-side onsubmit validation.
I don't know what you've tried, but this is one way to select for example the first item of the drop-down list:
document.getElementsByTagName('select')[0].getElementsByTagName('option')[0].selected = true;
(http://jsfiddle.net/Jawh6/)
Crude, I know. Usually your forms and fields would be named or otherwise identified so you can address them more excplicitly: e.g. document.myForm.mySelect.options[0].selected = true;
Since your PHP is already setting the 'selected' attribute on the option (or your question isn't very well tagged), this would be the best place to set the default option when the page loads, that requires no JavaScript at all.
If you're interested in how to get PHP to write out the HTML for a select element and correctly assign the selected attribute to the intended option, I reckon you need to write a new question to attract the PHP folk.
Either you have other calls to your DoSomething function, or you've oversimplified your example and you're actually using a framework to bind the event handler to the field and maybe you accidentally called your function instead of assigning it, e.g.:
mySelect.onchange = DoSomething(); // oops, this calls DoSomething right away.
mySelect.onchange = DoSomething; // this sets DoSomething as the event handler.

jQuery capture the change event of a dropdown when change is performed by JavaScript

I would like to be able to detect when the selected value of dropdown has changed using jQuery. The selected value of the dropdown is changed by other JavaScript, so I want to be able to catch this event.
I can see the dropdown changing, however the following code does not capture the event correctly. Does the change event only capture the event when it is performed by the user and not other code?
$('select[name=b_country]').live('change', function() {
alert('the country dropdown has changed');
});
<select name="b_country" style="display: block;">

Yes, only user interactions fire the event. Otherwise you wouldn't be able to (re)set values in a listener without entering an infinite loop.
If you want to inform other (listening) scripts that you changed the value, you can manually trigger an event. With jQuery, this is easy:
$('select[name=b_country]').val(…).change();

blur to close select box do not work in chrome?

When user clicks on select box , I want to hide the options menu which I do by firing blur event on select box . Following code works on firefox but not on chrome .
<select id="myselect" name="city">
<option value="default" id="first">Default value</option>
</select>
<script type="text/javascript">
$('#myselect').click(function(){
$(this).blur();
});
</script>
In chrome options menu stays as it is.

I suspect that this is related to user modal state (although I couldn't find any documentation to support it, I might add). I suspect that any event listeners are ignored until the user has made a selection from the options.
To support this, you can see that $(this).blur() fires exactly as expected when we hook it up to the onchange event of the <select>:
http://jsfiddle.net/TkfPN/
It would be far better to simply disable the <select> element. Blurring a focused element is extremely bad HCI and frustrating to the user.

Here is my hack for my problem
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) $(".option").hide();
where class "option" represent all the option of select box.

I found a solution to this. Just delete the select box's node then add it back in! Make sure you're using delegated event handlers. Seems to work in all browsers. Here's my solution in jQuery, but if someone wants to write a pure JS solution, that would be good also.
jQuery('.sortSelect').appendTo('.sortParent');
If it wasn't appearant, the markup in this example works if sortSelect is the last direct child of sortParent. $.insertAfter()/$.insertBefore() would work as well.

Keeping jQuerys .change() from running on page load

I have a page that has multiple select lists and when ever one of the select list changes using jQuery's .change() function I change the text in a span next to the select list. When the page loads there is already some text in every span (the text different for each span). The problem is that when the page loads the .change() function loops through all of the select lists changing the text in every span. I don't want the text in the span to change until a user selects a different item in the list. I can't just check to see if there is text in the span because if a user does change the selected item it doesn't matter if there is any text or not, I just don't want to to replace the text when the page loads. So, how can I get the .change() function to stop firing when the page is loaded? The code:
JS/jQuery
$(document).ready(function() {
$("select").change(function () {
var txt = $(this).val();
$(this).next('span').text(txt);
}).trigger('change');
});
HTML (repeated many times)
<select name="animal[]">
<option value="dog" selected="selected">dog</option>
<option value="cat">cat</option>
<option value="bird">bird</option>
<option value="snake">snake</option>
</select>
<span class="out">text that shouldn't be replaced until user changes selected item</span>
Thanks for your help!

You just need to remove this call:
.trigger('change')
It's what's invoking the $("select").change(function () { ... }) handler that you just bound. The default behavior is to wait for the change event to occur...a .trigger('change') or .change() (no parameters) will simulate the change event, making that handler go to work.

The "change" is triggering because your code is telling it to! That call to .trigger("change") says, "run the 'change' event handler please". So, take that out.
Now, the thing is, the reason your code was written that way was probably to make sure that the settings of the <select> elements really reflects what the behavior is supposed to be when users manually make the same changes. For example, sometimes there are forms where part of the inputs are supposed to be disabled unless a <select> is set to a certain option. By triggering the "change" event on page load, the code could make sure that those rules are in force. If you just take out that trigger, things may not work right, is what I'm saying. That handler looks pretty simple, so maybe the problem is that this code was cut-and-pasted from somewhere else.

Onchange event of Dropdownlist

I have a dropdown list. I am using onchange event of this dropdown to show some text in a textbox below.
Its perfectly fine, but I want to to do something like this:---
If user click on the drop down then the whole list will be populated. right.. Now if he is trying to choose the value from the list using up/down arrow button of the key board I want to fire the event at that time. How can I do this?
Onchange is not working for this purpose.

You can do something like this:
<script type="text/javascript">
function change(value){
alert("key pressed "+value)
}
</script>
<select name="k" onkeypress="change(this.value)">
<option value="acb">ABC</option>
<option value="def">DEF</option>
</select>

You have the onkeydown event. MSDN
In your case, onchange will be raised when the select list loses the focus.