I'm new to JS and Mootools and I've been having a really funny error using getSelected() with Mootools 1.3.2. I've looked at other posts that have similar code, but I haven't been successful. I'm using getSelected to try and get the value of an option and for some reason, my browser simply isn't calling it.
Here's the HTML
<select id="id_method" name="method">
<option selected="selected" value="">---------</option>
<option value="Au">Auction (Best Price Wins)</option>
<option value="Fi">Fixed Price</option>
<option value="Fr">Free Item/Donation</option>
<option value="Mu">Multiple Items and Prices</option>
<option value="No">No Price Displayed</option>
<option value="Tr">Trade</option>
</select>
Here's the JS
window.addEvent('domready', function() {
...
$('id_method').addEvent('change', function() {
alert(this.getSelected().selection[0].value);
});
});
Here's my attempt at putting in in jsfiddle: http://jsfiddle.net/jNYud/
I know this is probably a really silly question, but I'd appreciate some help. Thanks!
The result of calling getSelected() returns an array, pure and simple. So you just need to look at the first element of that array. So replace your alert with this one:
alert(this.getSelected()[0].value);
Related
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());
}
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);
How to remove items (value="0") from select box?
Below is an example select box.
<select class="form-select" name="column" id="edit-column">
<option value="-1">Search All Columns</option>
<option value="0">option 1</option>
<option value="1">option 2</option>
</select>
my JavaScript is not working
$('#edit-column option[value="0"]').remove();
Your JavaScript is fine -- you're probably just running it before the DOM is fully loaded.
So, as PSL mentioned in the comments, you have to use something like this in jQuery:
$(function(){
$('#edit-column option[value="0"]').remove();
});
Which is really just shorthand for:
$(document).ready(function() {
$('#edit-column option[value="0"]').remove();
});
Here's the updated fiddle.
How do I use jquery to find the position of the currently selected option, it also needs to update in real time if the user selects a different option.
<select id="visa_type_c" title="" name="visa_type_c">
<option selected="selected" value="No Visa" label="No Visa">No Visa</option>
<option value="EU Visa" label="EU Visa">EU Visa</option>
<option value="Easy Visa" label="Easy Visa">Easy Visa</option>
<option value="Hard Visa" label="Hard Visa">Hard Visa</option>
</select>
I seen the other threads but they are slightly different and I cant seem to make it work right for me.
Can just use pure JS:
document.getElementById("visa_type_c").onchange = function() {
alert(this.selectedIndex);
}
Pure JS Demo: http://jsfiddle.net/Xxqnr/1/
$("select").on("change", function(ev) {
console.log(ev.target.selectedIndex);
});
<a href='javascript:alert($("#visa_type_c option:selected").index())';>click for index</a>
Lots of ways to do it; if you add this to your page it will show you the selected index.
This bit of HTML and Javascript works in IE6, FF2 and FF3. I can't find any reason why it shouldn't work in IE7 also, but this.selectedIndex always returns 0.
** in javascript file
function onTypeChange()
{
alert($('type_id').selectedIndex);
if ($('type_id').selectedIndex != 0)
{
Element.update('chosenType', this.options[this.selectedIndex].text);
Form.Element.enable('go_button');
} else {
Element.update('chosenType', 'Selected Type');
Form.Element.disable('go_button');
}
}
** in html
<select class="hosp_select_buttons selectbox" id="type_id" name="type[id]"
onchange="onTypeChange();">
<option value="">Please select</option>
<option value="1594">Ambulatory Surgical Center</option>
<option value="1595">Birthing Center</option>
<option value="1596">Comprehensive Outpatient Rehabilitation Facilities</option>
<option value="1597">Drug Abuse Treatment Program</option>
<option value="1598">Mammography</option>
<option value="1599">Narcotic Treatment Program</option>
<option value="1600">Outpatient Physical Therapy</option>
<option value="1601">Private Home Care Provider</option></select>
** Edited to change the stylistic things people objected so strongly too. The alert still says the selectedIndex is 0 after I change the select box. This code has, and still does work in all browsers other than I.E. 7
You're trying to get selectedIndex from the option list.
Use this.selectedIndex instead of this.options.selectedIndex.
Also see this example for cleaner usage: http://www.mredkj.com/tutorials/tutorial002.html
I know this is old, but I can't help seeing it here unaswered. I think the problem here is that you're using $('type_id'), which returns an Element in jquery (I believe). To access the actual HTML element you have to use $('type_id')[0] or something like that. I think if you use document.getElementById('type_id') it should work.
Edit: Changed answer to reflect Benxamin's comment about how to access the dom element $('type_id')[0]