Develop Reference

How to alert the selected option using javascript or jquery?

I am using a select tag in my code, here is my code,
<select onchange="test(this);">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
and javascript code is here,
<script>
function test(obj)
{
alert($(obj).val());
}
</script>
I want to alert the selected text here, If I use the above code the value of the selected option is coming, but I want to alert the text of the selected option can anyone tell to achive this one.
I want to alert it without using any class or id.
I want to alert it only through the obj.
I am waiting for your help.
Thanks In advance

This should do the trick...
alert($(obj).find("option:selected").text());
That uses the jQuery object $(obj), like you already had, but does a find() which searches the child elements, in this case the selected option.
jQuery find()
:selected pseudo-selector

Try this..
alert($(obj).find("option:selected").text());

you can try this:
alert($(obj).find('option').eq(obj.value).text());
Working jsFiddle

<select id="someid" onchange="test();">
<option value="0">Select</option>
<option value="1">Select1</option>
<option value="2">Select2</option>
<option value="3">Select3</option>
</select>
javascript>
function test(){
var elem = document.getElementById("someid"),
var selectedNode = elem.options[elem.selectedIndex].text;
alert(selectedNode );
}
jQuery>
$("#someid").change(){
alert($(this).find("option:selected").text());
}

Fail to set selected in combobox jquery

i'm loading a combo-box dynamically with jquery, after renderized, this combo have the follow structure
<select id="cboCliente" class="form-control">
<option value="0">Selecione...</option>
<option value="1">Cliente 0</option>
<option value="2">Cliente 1</option>
<option value="3">Cliente 2</option>
</select>
After some validation, i try to set one of this options as "selected", but don't work. This is my code:
$('#cboCliente option[value='+ m.getIdCliente() +']').prop('selected', true);
the method getIdCliente() is working fine, i receive the value "1".
The thing is, the jQuery can't set the selected option, and when a try for the Developer tools of chrome, everything works fine.
Am i doing something wrong?

Use
$("#cboCliente").val(m.getIdCliente());
Working demo: http://jsfiddle.net/GNzSL/

can we cache it first like this?
var selected = '#cboCliente option[value='+ m.getIdCliente() +']';
$(selected).prop('selected', true);

Modify selected property in select option

I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!

You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>

I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);

How initialize dropdown (<select/>) with preselected value and then change it?

I've got a grid with dropdown in every row and I need to render it's state from DB.
So I've got dropdowns defined like that with selected option specified for preselecting the value from DB.
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>​
The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don't move and stays where it was.
So when I then call $("#selectId").val() I get the old one value.
What's the appropriate way to initialize dropdown control and then have an ability to freely change it's value in browser or by jQuery?

This seems to be working fine (Firefox on Ubuntu):
HTML
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
JS
$('#selectId').change(function() {
var opt = $(this).find('option:selected');
console.log([opt.val(), opt.text()]);
});
var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');
If you select the options, you'll see that it will print the changed version. Working example:
http://jsfiddle.net/vm4Q8/
Hope this helps.

It should work fine. May be you are not setting it correctly.
You should pass the value of the option to val() method to select it.
E.g $('#selectId').val('1'); will set first option as selected and afterwards calling $('#selectId').val() will give you 1 and not 2.
Here is the working example http://jsfiddle.net/3eu85/

You can get the val of the option selected, instead of the select
$('select#selectId option:selected').val();
Docs: http://api.jquery.com/val/

Which browser are you trying this in? Your code looks fine to me, and appears to be working in this jsFiddle.

please use this code instead,
$('#selectId option:selected').val();

Javascript Event for Select element Selection

I'm looking to find the Javascript Event I need to put into jQuery's .bind function in order to have the function triggered when a selection is made from a <select> element.
At the moment I'm using .bind('change',function() { ...}) but I need the event to trigger when the selected option is chosen again.
Any suggestions?

I'm currently doing this successfully by clearing the dropdown box selection so that it can be re-selected. It will allow you to trigger the function again by adding this within your function before the end:
$('select option:selected').removeAttr('selected');

Change on select boxes is unreliable anyway. Read:
http://www.quirksmode.org/dom/events/change.html#t05
I'd probably go for something click (but be suspicious, somebody (--> IE) is going to make your life difficult). Or build something yourself without select.

This is possible, however it is not fully supported. Here is a sample:
html
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
jquery
$("#selectId>option").click(function(){
alert(this.value);
});
here is a mediocre approach to handle ie:
<div id="dropdownWrapper">
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
js
var clickCount_guid324fF = 0;
$("#dropdownWrapper").click(function(){
if(++clickCount_guid324fF % 2 == 0){
alert($("#selectId").val());
clickCount_guid324fF = 0;
}
});

Wouldn't click work? .bind('click',function() { ...})

I once did this using mouseup, and checked where the event originated. If it was an option element, i handled the select. No listening on onchange at all:
<body>
<select id="select0">
<option value="0">option 0</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<script type="text/javascript">
$('#select0').bind('mouseup', function (e) {
var src = e.target;
if (src.nodeName.toLowerCase()==='option') {
doMagicOnSelect(this);
}
});
function doMagicOnSelect(selectElem) {
console.log('current value:'+selectElem.value);
}
</script>
</body>

There is no reliable event fired when a selected option is re-chosen.
Whilst on some browsers you can catch events originating from an <option> (which you could use to trap click and keyboard events if you had the patience to try to reproduce a browser's select handling), this is unstandardised and doesn't work in IE (as it uses native Windows widgets to implement select boxes, which don't give that kind of granular access).
If you need to be able to re-fire an event when the same option is chosen again, what you have doesn't really sound like a select box to me; it could perhaps be better replaced with a scripted pop-up div full of buttons. (There are plenty of scripts that will substitute a select box for a scripted div to give you greater control on browsers where JavaScript is available.)

bind the change AND click event
$select.bind("change click", function (event) { // do something });