How would I get the second value in a dropdown list using javascript or jquery?
<select id='dropdown'>
<option selected>Any</option>
<option>2</option>
<option>3</option>
</select>
e.g. i would like to get the value of number 2 in the dropdown
Neither of those options has a value. (Actually, see note below.) You can get the text like this:
var text = $("#dropdown")[0].options[1].text;
Or without jQuery:
var text = document.getElementById("dropdown").options[1].text;
Live Example | Live Source
Or you can use .value instead of .text, as the option elements will default their value property if you don't give them a value attribute. (You can't select them using a value= selector, but the property is defaulted.)
To get the second value in a dropdown list using jquery, you can do this using .eq():
var text = $("#dropdown option").eq(1).text();
In order, to get the n th number value in the dropdown list, you can do this:
var text = $("#dropdown option").eq(n - 1).text();
Try this
JS CODE
$(function(){
alert($('#dropdown option').eq(1).val());
});
LIVE DEMO
Why not try this so easy to understand then :eq(n)
http://jsfiddle.net/q9qCR/2/
$('#dropdown option:nth-child(2)').val()
Try
$(document).ready(function() {
alert($("#dropdown option").eq(1).text());
});
Related
I have a this select dropdown:
<select id="category">
<option value="cat1">Category 1</option>
<option value="cat2">Category 2</option>
</select>
and I have this code that everytime I select something form the dropdown it takes the value and find the same class and show it on the last line
$('#category').change(function () {
var selected_category = $(this).val();
$('#sub-category').find('.option').hide();
$('#sub-category').find('.'+selected_category).show();
});
I just want to change instead of class so it will find the attribute rel
** edited **
You definitely don't need jQuery for this. Here's the code to find all option tags with a rel attribute of "sub-cat1":
document.querySelectorAll('option[rel="sub-cat1"]')
The above will work in IE8 and up, which should satisfy all browsers you need to support. The jQuery solution is similar, and uses the same selector string:
$('option[rel="sub-cat1"]')
Furthermore, you don't need to add a class of "option". Simply select using the option tag name.
There can be an alternate way to your answer.
Using jquery try ,
$ (".classname").each(function(){
//iterate over similar *classname* elements one by one
$(this).someFunc(); //it will help you to preform operation at current value while iteration
});
With rel if you want to iterate over rel tag values , try
$("[rel='sub-cat-1']").each(function(){
//Some operation
});
i want to use a input box from SELECT2(jQuery Plugin) and want to send it with PHP Post to the server.
How do i access these Elements (A, Adolf, B)?
Thanks
$('.select2-search-choice div');
if you want to get the text of the elements, then use $('.select2-search-choice div').text();
If you use Select2 (http://ivaynberg.github.io/select2/) it overrides <select> element.
So probably you use like this:
<select id="my-select"><option>...</option></select>
And in JS:
$("#my-select").select2();
This way - if you want to read current value just use:
$("#my-select").val();
or using Select2 API:
$("#my-select").select2("val");
If you need to get all values from <option>'s - you can do it like this:
$("#my-select option").map(function() {return $(this).val();}).get();
You can loop through $('li.seleact2-search-choice').children('div'); or simply $('.select2-search-choice div');
To get an Array of the values use the API from select2:
var data = $("#YourSelect2Element").select2("val");
You have to change the selector in the selector you used to create the select2 input.
See the docs.
If i have a dropdown list that looks like this:
<select id="select">
<option value="Armoire">Armoire</option>
<option value="Bridge Bed">Brigde Bed</option>
<option value="Bunk Bed">Bunk Bed</option>
</select>
Is it possible to get the value at an specific position? For example:
var b=select.getValueAt(1);
so that b would equal to "Bridge Bed". That would be the right line for regular java code. Is there anyway to do this using javascript?
Thanks in advance,
The select element has an property called options which is an array of all the option tags it contains
To get the value of element at index one use
var b = document.getElementById('select').options[1].value
Select ObjectFiddle
Assuming you've already manage to get the <select> element somehow:
var idx = 1;
var selectTag = document.getElementById('select');
var b = selectTag.getElementsByTagName("option")[idx].getAttribute("value");
This uses proper DOM methods to do the work and will get all child <option> tags, including those in <optgroup>. The index ignores <optgroup> and indexes all <option> tags from 0. An example (which alerts the value) is here
My select box is as follows:
<select id='list'>
<option value='1'>A</option>
<option value='2'>B</option>
<option value='3'>C</option>
</select>
I want to get the value of option - B without selecting it.
With jQuery I can do the opposite i.e get the text when I know the value through following:
$("#list option[value='2']").text();
But I want the reverse. I tried with following but not working:
$("#owner option['B']").val();
How can I do this?
Use the :contains selector.
Assuming "owner" really is the ID of your <select> (it's "list" in your example), you can use:
$("#owner option:contains('B')").val() // 2
You can use the :contains(text) selector, to only get the elements that contain certain text:
$("#list option:contains('B')").val();
You can use .filter to get the right option element:
$("#list option").filter(function() {
return $(this).text() == "B";
}).val();
http://jsfiddle.net/JWjKf/
try this
var b = $("#list").find('option:contains("B")').val();
see here : http://jsfiddle.net/MxpTZ/1/
Try this script
$('#list option:contains("B")').prop('value') //jquery 1.6 or later
oR
$('#list option:contains("B")').attr('value');
If you wanted to get the element by position, you can do this:
$('#list').children().eq(1).val();
I have many options in my dropdownlist like:
<option value="1">it's me</option>
I need to select the option who have value it's me inside the tag, not by attribute like 1.
How can I do this using jQuery?
if your wanting to use jQuery for this, try the following code.
$('select option[value="1"]').attr("selected",true);
Updated:
Following a comment from Vivek, correctly pointed out steven spielberg wanted to select the option via its Text value.
Here below is the updated code.
$('select option:contains("it\'s me")').prop('selected',true);
You need to use the :contains(text) selector to find via the containing text.
Also jQuery prop offeres better support for Internet Explorer when getting and setting attributes.
A working example on JSFiddle
You can just do this:
$('#myCombobox').val(1)
val() should handle both cases
<option value="1">it's me</option>
$('select').val('1'); // selects "it's me"
$('select').val("it's me"); // also selects "it's me"
$('#userZipFiles option').prop('selected', function() {
return this.defaultSelected;
});
$("#dropdownList option[text='it\'s me']").attr("selected","selected");
jQuery("select#cboDays option[value='Wednesday']").attr("selected", "selected");
One line of jQuery does it all!
$("#myCombobox option[text='it\'s me']").attr("selected","selected");
This is working fine:
$('#country').val($("#country option:contains('It\'s Me')").val());