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
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
});
My question is can you call just one javascript function and affect two html drop down list the idea is to use the codes below
javascript code:
document.getElementsByClassName("cmbRecom")
html code:
<Select name="drop1" class="cmbRecom" >
<option>Check Fields</option>
</Select>
<Select name="drop2" class="cmbRecom" >
<option>Check Fields</option>
</Select>
what is in my head, is the css behavior where you can name html elements with the same class names and all will follow that style that is declared for that class.
Yes, you can. One possible way is as follows:
document.documentElement.cmbRecomb;
When selecting elements using the function getElementsByClassName the code should work with the returned elements as an array, which will require iteration through the selected elements.
var selects = document.getElementsByClassName("cmbRecom"); //was cmbField
for(var i = 0; i < selects.length; i++){
selects[i].style.width = "200px";
}
Note: The class name and selector were different.
JS Fiddle: http://jsfiddle.net/LWxcX/
This question already has answers here:
Getting an option text/value with JavaScript
(4 answers)
Closed 8 years ago.
I have this code, with books of the bible all within a element:
<option value="1">Genesis</option>
<option value="2">Exodus</option>
<option value="3">Leviticus</option>
<option value="4">Numbers</option>
<option value="5">Deuteronomy</option>
<option value="6">Joshua</option>
<option value="7">Judges</option>
To further explain, I have the value as the book ID, so when I go to fetch all the verses from my Database I can just refer to them by the book number.
But doing that, I have no way of getting the user viewed friendly name like "Genesis", so that I can format it like that.
How do I fetch this (the one currently selected, i.e. "Genesis" not '1') from JavaScript?
Save the result of your getElementById to a variable like sel, and then do this:
var text = sel.options[sel.selectedIndex].text;
Select elements have an .options property that gives you an array-like collection of all of its nested option elements. They also have a .selectedIndex property, which returns the index of the currently selected element.
Using the two of these, you can get the currently selected option. Then simply use .text to get the text content of the selected option.
If you don't need to support IE6/7, you can use document.querySelector() to make things a little shorter.
var text = document.querySelector("#the_select_id option:selected").text;
The querySelector() method returns a single element, or null if none was found. There's also a querySelectorAll() method that will return a collection of elements, useful for when your selector should match multiple elements.
If your parent element has name="books" as an attribute, and is a select element, then you can do this using jQuery:
var bookName = $('select[name="books"] option:selected').text();
If your parent element has an id="books" as an attribute, and is a select element, then you can do this using plain JavaScript (can probably be improved upon):
var books = document.getElementById('books');
var bookName = books.options[books.selectedIndex].text;
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());
});
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();