select item of a Select box by its item number in jQuery - javascript

How do I select item of a Select box by its item number in jQuery?
<select id="selectbox" style="width: 220px;">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
</select>
Like:
$("#selectbox").val() = $("#selectbox").Item[0].val();
I mean I want to toggle item to set it by its number.

.val() is a function so you cannot assign a value to it, you need to use the setter version of .val() to set an input element's value
You can access the first option's value using the index value
var $select = $("#selectbox");
$select.val($select.children().first().val())
//$select.val($select.children().eq(0).val())
Demo: Fiddle

$("#selectbox").val($("#selectbox option:nth-child(0)").val());
Where 0 can be any number, of course

I wanted to make this into a plugin.
;(function($){
$.fn.setByOptionIndex = function( idx ){
return this.each(function(){
var $select = $(this);
$select.val( $select.find('option').eq(idx - 1).val() );
});
}
})(jQuery);
Then just use it with:
$('select').setByOptionIndex(2);

To me, this would be the clearest approach:
$("#selectbox option").eq(1).prop('selected',true);
Note, that the parameter of eq() function is treated like you would access an array. So the second element is eq(1)

using javascript:
var select=document.getElementById("selectbox")
var options=select.getElementsByTagName("option")
select.value=options[0].innerHTML

Related

Getting value from select drop-down [duplicate]

Usually I use $("#id").val() to return the value of the selected option, but this time it doesn't work.
The selected tag has the id aioConceptName
html code
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>
For dropdown options you probably want something like this:
For selected text
var conceptName = $('#aioConceptName').find(":selected").text();
For selected value
var conceptName = $('#aioConceptName').find(":selected").val();
The reason val() doesn't do the trick is because clicking an option doesn't change the value of the dropdown--it just adds the :selected property to the selected option which is a child of the dropdown.
Set the values for each of the options
<label for="aioConceptName">AIO Concept Name</label>
<select id="aioConceptName">
<option value="0">choose io</option>
<option value="1">roma</option>
<option value="2">totti</option>
</select>
$('#aioConceptName').val() didn't work because .val() returns the value attribute. To have it work properly, the value attributes must be set on each <option>.
Now you can call $('#aioConceptName').val() instead of all this :selected voodoo being suggested by others.
I stumbled across this question and developed a more concise version of Elliot BOnneville's answer:
var conceptName = $('#aioConceptName :selected').text();
or generically:
$('#id :pseudoclass')
This saves you an extra jQuery call, selects everything in one shot, and is more clear (my opinion).
Try this for value...
$("select#id_of_select_element option").filter(":selected").val();
or this for text...
$("select#id_of_select_element option").filter(":selected").text();
If you are in event context, in jQuery, you can retrieve the selected option element using :
$(this).find('option:selected') like this :
$('dropdown_selector').change(function() {
//Use $option (with the "$") to see that the variable is a jQuery object
var $option = $(this).find('option:selected');
//Added with the EDIT
var value = $option.val();//to get content of "value" attrib
var text = $option.text();//to get <option>Text</option> content
});
Edit
As mentioned by PossessWithin, My answer just answer to the question : How to select selected "Option".
Next, to get the option value, use option.val().
Have you considered using plain old javascript?
var box = document.getElementById('aioConceptName');
conceptName = box.options[box.selectedIndex].text;
See also Getting an option text/value with JavaScript
$('#aioConceptName option:selected').val();
For good practice you need to use val() to get value of selected options not text().
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
<option value="choose">choose io</option>
</select>
You can use
$("#aioConceptName").find(':selected').val();
Or
$("#aioConceptName :selected").val();
Reading the value (not the text) of a select:
var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();
How to disable a select?
in both variants, value can be changed using:
A
User can not interact with the dropdown. And he doesn't know what other options might exists.
$('#Status').prop('disabled', true);
B
User can see the options in the dropdown but all of them are disabled:
$('#Status option').attr('disabled', true);
In this case, $("#Status").val() will only work for jQuery versions smaller than 1.9.0. All other variants will work.
How to update a disabled select?
From code behind you can still update the value in your select. It is disabled only for users:
$("#Status").val(2);
In some cases you might need to fire events:
$("#Status").val(2).change();
With JQuery:
If you want to get the selected option text, you can use $(select element).text().
var text = $('#aioConceptName option:selected').text();
If you want to get selected option value, you can use $(select element).val().
var val = $('#aioConceptName option:selected').val();
Make sure to set value attribute in <option> tag, like:
<select id="aioConceptName">
<option value="">choose io</option>
<option value="roma(value)">roma(text)</option>
<option value="totti(value)">totti(text)</option>
</select>
With this HTML code sample, assuming last option is selected:
var text will give you totti(text)
var val will give you totti(value)
$(document).on('change','#aioConceptName' ,function(){
var val = $('#aioConceptName option:selected').val();
var text = $('#aioConceptName option:selected').text();
$('.result').text("Select Value = " + val);
$('.result').append("<br>Select Text = " + text);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="aioConceptName">
<option value="io(value)">choose io</option>
<option value="roma(value)">roma(text)</option>
<option value="totti(value)">totti(text)</option>
</select>
<p class="result"></p>
you should use this syntax:
var value = $('#Id :selected').val();
So try this Code:
var values = $('#aioConceptName :selected').val();
you can test in Fiddle: http://jsfiddle.net/PJT6r/9/
see about this answer in this post
to find correct selections with jQuery consider multiple selections can be available in html trees and confuse your expected output.
(:selected).val() or (:selected).text() will not work correct on multiple select options. So we keep an array of all selections first like .map() could do and then return the desired argument or text.
The following example illustrates those problems and offers a better approach
<select id="form-s" multiple="multiple">
<option selected>city1</option>
<option selected value="c2">city2</option>
<option value="c3">city3</option>
</select>
<select id="aioConceptName">
<option value="s1" selected >choose io</option>
<option value="s2">roma </option>
<option value="s3">totti</option>
</select>
<select id="test">
<option value="s4">paloma</option>
<option value="s5" selected >foo</option>
<option value="s6">bar</option>
</select>
<script>
$('select').change(function() {
var a=$(':selected').text(); // "city1city2choose iofoo"
var b=$(':selected').val(); // "city1" - selects just first query !
//but..
var c=$(':selected').map(function(){ // ["city1","city2","choose io","foo"]
return $(this).text();
});
var d=$(':selected').map(function(){ // ["city1","c2","s1","s5"]
return $(this).val();
});
console.log(a,b,c,d);
});
</script>
see the different bug prone output in variant a, b compared to correctly working c & d that keep all selections in an array and then return what you look for.
Just this should work:
var conceptName = $('#aioConceptName').val();
$(function() {
$('#aioConceptName').on('change', function(event) {
console.log(event.type + " event with:", $(this).val());
$(this).prev('input').val($(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>
Using jQuery, just add a change event and get selected value or text within that handler.
If you need selected text, please use this code:
$("#aioConceptName").change(function () {
alert($("#aioConceptName :selected").text())
});
Or if you need selected value, please use this code:
$("#aioConceptName").change(function () {
alert($("#aioConceptName :selected").attr('value'))
});
For anyone who found out that best answer don't work.
Try to use:
$( "#aioConceptName option:selected" ).attr("value");
Works for me in recent projects so it is worth to look on it.
Use the jQuery.val() function for select elements, too:
The .val() method is primarily used to get the values of form elements
such as input, select and textarea. In the case of select elements, it
returns null when no option is selected and an array containing the
value of each selected option when there is at least one and it is
possible to select more because the multiple attribute is present.
$(function() {
$("#aioConceptName").on("change", function() {
$("#debug").text($("#aioConceptName").val());
}).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>
<div id="debug"></div>
Straight forward and pretty easy:
Your dropdown
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>
Jquery code to get the selected value
$('#aioConceptName').change(function() {
var $option = $(this).find('option:selected');
//Added with the EDIT
var value = $option.val(); //returns the value of the selected option.
var text = $option.text(); //returns the text of the selected option.
});
For get value of tag selected:
$('#id_Of_Parent_Selected_Tag').find(":selected").val();
And if you want to get text use this code:
$('#id_Of_Parent_Selected_Tag').find(":selected").text();
For Example:
<div id="i_am_parent_of_select_tag">
<select>
<option value="1">CR7</option>
<option value="2">MESSI</option>
</select>
</div>
<script>
$('#i_am_parent_of_select_tag').find(":selected").val();//OUTPUT:1 OR 2
$('#i_am_parent_of_select_tag').find(":selected").text();//OUTPUT:CR7 OR MESSI
</script>
You can try to debug it this way:
console.log($('#aioConceptName option:selected').val())
I hope this also helps to understand better and helps
try this below,
$('select[id="aioConceptName[]"] option:selected').each(function(key,value){
options2[$(this).val()] = $(this).text();
console.log(JSON.stringify(options2));
});
to more details please
http://www.drtuts.com/get-value-multi-select-dropdown-without-value-attribute-using-jquery/
If you want to grab the 'value' attribute instead of the text node, this will work for you:
var conceptName = $('#aioConceptName').find(":selected").attr('value');
Here is the simple solution for this issue.
$("select#aioConceptName").change(function () {
var selectedaioConceptName = $('#aioConceptName').find(":selected").val();;
console.log(selectedaioConceptName);
});
try to this one
$(document).ready(function() {
$("#name option").filter(function() {
return $(this).val() == $("#firstname").val();
}).attr('selected', true);
$("#name").live("change", function() {
$("#firstname").val($(this).find("option:selected").attr("value"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<select id="name" name="name">
<option value="">Please select...</option>
<option value="Elvis">Elvis</option>
<option value="Frank">Frank</option>
<option value="Jim">Jim</option>
</select>
<input type="text" id="firstname" name="firstname" value="Elvis" readonly="readonly">
$('nameofDropDownList').prop('selectedIndex', whateverNumberasInt);
Imagine the DDL as an array with indexes, you are selecting one index. Choose the one which you want to set it to with your JS.
You can use $("#drpList").val();
to fetch a select with same class= name you could do this, to check if a select option is selected.
var bOK = true;
$('.optKategorien').each(function(index,el){
if($(el).find(":selected").text() == "") {
bOK = false;
}
});
I had the same issue and I figured out why it was not working on my case
The html page was divided into different html fragments and I found that I have another input field that carries the same Id of the select, which caused the val() to be always empty
I hope this saves the day for anyone who have similar issue.
Try
aioConceptName.selectedOptions[0].value
let val = aioConceptName.selectedOptions[0].value
console.log('selected value:',val);
<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
<option>choose io</option>
<option>roma</option>
<option>totti</option>
</select>
There is only one correct way to find selected option - by option value attribute. So take the simple code:
//find selected option
$select = $("#mySelect");
$selectedOption = $select.find( "option[value=" + $select.val() + "]" );
//get selected option text
console.log( $selectedOption.text() );
So if you have list like this:
<select id="#mySelect" >
<option value="value1" >First option</option>
<option value="value2" >Second option</option>
<option value="value3" selected >Third option</option>
</select>
If you use selected attribute for option, then find(":selected") will give incorrect result because selected attribute will stay at option forever, even user selects another option.
Even if user will selects first or second option, the result of $("select option:selected") will give two elements! So $("select :selected").text() will give a result like "First option Third option"
So use value attribute selector and don't forget to set value attribute for all options!
You many try this:
var ioConceptName = $('#ioConceptName option:selected').text();

Value from comma separated select option values and append the second value to a other select option

i'm struggling with a question, how i can get the value from comma separated select option value and append the second value to a other select option?
My html looks
<select id="firstSelecter_ID1">
<option value"first value, second value, third value">option1</option>
<option value"first value, second value, third value">option2</option>
<option value"first value, second value, third value">option3</option>
<option value"first value, second value, third value">option4</option>
</select>
<select id="secondSelecter_ID2">
<option value"second value">option1-a</option>
<option value"second value">option2-a</option>
<option value"second value">option3-a</option>
<option value"second value">option4-a</option>
</select>
var entry6 = $('#Id_6')
entry6.on('change', 'select#firstSelecter_ID1', function (e) {
...
option value ,second .append() to #secondSelecter_ID2 as new option value =""
...
}
Many thanks if somebody can give me the idea and I hope I have asked the question right and understandable
Regards Maty
Try something like
$('#select_1 option').each(function(){
var secondVal = this.value.split(',')[1].trim(),
$opt = $('<option>').val(secondVal).text($(this).text());
$('#select_2').append($opt);
});
Ok, i got it to work how i need it...
entry1.on('change', 'select#actiontypeSelect', function (e) {
$("select#secondSelecter_ID2 option:eq(1)").remove();
$("select#secondSelecter_ID2 option:last").remove();
$('select#actiontypeSelect').each(function () {
var value1 = $('select#actiontypeSelect').find("option:selected").val();
var secondVal = value1.split(',')[1].trim(),
$opt = $('<option>').val(secondVal).text('Exclusive Equipment');
$('#secondSelecter_ID2').append($opt);
console.log(value1);
});
$("select#secondSelecter_ID2").append('<option value="0.00">Inclusive Equipment</option>');
e.preventDefault();
});
This gives me from the selected option the second value and append as a new option with the value to other select box.
Special thanks to #charlietfl he gives me the right way.

jQuery - Set the selected option of a select box using value or text with options nested in optgroups

So I am writing an app that requires an address input and I have a select element for the user to select the state/province. It needs to support the US and Canada so it has nested optgroups to separate those out and a single, first level option as it's default value. Here is a basic example:
<select name="state" id="state">
<option class="co" value="" data-placeholder="true" disabled selected>Choose your state...</option>
<optgroup label="United States">
<option class="co" value="AL">Alabama</option>
<option class="co" value="AK">Alaska</option>
<option class="co" value="AZ">Arizona</option>
</optgroup>
<optgroup label="Canada">
<option class="co" value="AB">Alberta</option>
<option class="co" value="BC">British Columbia</option>
<option class="co" value="MB">Manitoba</option>
</optgroup>
Now I need to programmatically select the option that matches input from an external source and I want to check for a match based on both the value of the option element or its text. Whichever option is a match would then be set as the selected option. I know you can set the selected option by value using
$("#state").val(myValue)
and I know you can set an option based on text in this way
var myText = "The state I want.";
$("#state").children().filter(function() {
return $(this).text() == myText;
}).prop('selected', true);
Is there a clean way to do this without having to run through each child and checking if it's an optgroup and then running through all its children to check for a match? Is there an easy way through jQuery to combine the value and text methods of setting the selected option?
One other complication, I am going to be doing this within an external jQuery plugin. Within the function I need to modify I have the select element as a variable
$element
so I need a way to do it kind of like this if possible:
$element.descendents(":option").filter(function() {
//do the selecting here
}).prop('selected', true);
If you want to select by the option value, use the value selector:
var myText = "AZ";
$('#state option[value="' + myText + '"]').prop('selected', true);
If you want to search by the option's label, use a filter:
var myText = "Arizona";
$('#state option').filter(function () { return $(this).html() == myText; }).prop('selected', true)
Solved. Since I already had my element passed to a function as a jQuery variable, $element, I couldn't just use the standard selector in the form of:
$("#state option").filter(
// filter function
).prop('selected', true);
After a lot of trying, I got this and it works:
function functionIHadToChange($element, value) {
// other code
$element.find("option").filter(function(){
return ( ($(this).val() == value) || ($(this).text() == value) )
}).prop('selected', true);
}
I am not sure I understood completely your question but I am attempting to answer it in this fiddle
The trick being that you can select it by setting the value of the select box directly
$("#state").val( a_value );
You can set it by $("#select_id").prop("selectedIndex", 3); // Select index starts from zero.
Read here for example this.
$element = $('select#state');
$options = $element.find('option');
$wanted_element = $options.filter(function () {
return $(this).val() == "Alabama" || $(this).text() == "Alabama"
});
$wanted_element.prop('selected', true);
Would be one way to do it.
But i would guess, without knowing the exact internas of the .find() method, in the end jQuery will use at least two loops itself to perform this...
I'm late here but for future visitor, easiest way to do that is :
html
<select name="dept">
<option value="">This doctor belongs to which department?</option>
<option value="1">Orthopaedics</option>
<option value="2">Pathology</option>
<option value="3">ENT</option>
</select>
jQuery
$('select[name="dept"]').val('3');
Output: This will active ENT.

Obtain the number of the item in an options menu?

I'm using .val() in jQuery to retain the value of an options menu onChange.
How would I retain the number (as in as it is ordered) of the item in the drop down using jQuery?
<select>
<option> //option 1
<option> //option 2
</select>
Here is what I have set up now:
<select id="start_month" onChange="getMonthDay()">
<option>Jan</option>
<option>Feb</option>
<option>March</option>
<option>April</option>
<select>
Using,
function getMonthDay()
{
$('#start_month').val()
}
I can get whatever value is selected, but my question is how do I get the Number down of this value in the markup? For March, I would want 3.. and so on
Can you reformulate your question better? I'm still lost in what do you want.
But, nevertheless here is how <select> works in jQuery
<select id="selection">
<option value="val_1">value 1</option>
<option value="val_2">value 2</option>
</select>
$("#selection").val() will give you val_1 or val_2 depending on witch item is currently selected.
If you want to go through all options and check the selected on, you can use
$("#selection option:selected").val();
or itenerate through all <option>'s
$("#selection option").each(function() {
if( $(this).is(":selected") ) {
var v = $(this).val();
}
});
If you want to retain all options you can easily clone them or assign them as data, if you want to keep those values throughout the pages, use Local Database or Cookies to persist the data.
To answer your question after your update:
First: Why don't you have:
<select id="start_month" onChange="getMonthDay()">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">March</option>
<option value="4">April</option>
<select>
And use the value of the selected item?
Second: Just use what I wrote above and itenerate through the options
$("#start_month option").each(function(index, element) {
if( $(this).is(":selected") ) {
// get index position, remember to add 1 as arrays start at 0
var n = index;
// break each
return false;
}
});
You'd get a list of the <option> elements, find the selected one, and use index:
var $opts = $('#start_month option');
var zero_based_index = $opts.index($opts.filter(':selected'));
Demo: http://jsfiddle.net/ambiguous/HyukW/
Just add 1 if you want a one-based index.
I made something like this,with zero based key ;
<select id='deneme'>
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>
$('#deneme').change(function(){
$.each( $('#deneme').children('option'),function(key,value){
if($(this).is(':selected'))
alert(key)
})
})
u can check from here http://jsfiddle.net/8JZCw/
No need for any iteration here, let jQuery do that for you, just get the selected index and increment...
$('#start_month option:selected').index() + 1

javascript function not getting dropdown text

i am using javascript to get the text of selected item from dropdown list.
but i am not getting the text.
i am traversing the dropdown list by name..
my html dropdownlist is as:
<select name="SomeName" onchange="div1();">
<option value="someVal">A</option>
<option value="someOtherVal">B</option>
<option value="someThirdVal">C</option>
</select>
and my javascript is as:
function div1() {
var select = document.getElementsByName("SomeName");
var result = select.options[select.selectedIndex].text;
alert(result);
}
can you please help me out..
Option 1 - If you're just looking for the value of the selected item, pass it.
<select name="SomeName" onchange="div1(this.value);">
<option value="someVal">A</option>
<option value="someOtherVal">B</option>
<option value="someThirdVal">C</option>
</select>
function div1(val)
{
alert(val);
}
Option 2 - You could also use the ID as suggested.
<select id="someID" name="SomeName" onchange="div1();">
<option value="someVal">A</option>
<option value="someOtherVal">B</option>
<option value="someThirdVal">C</option>
</select>
function div1()
{
var ddl = document.getElementById("someID");
var selectedText = ddl.options[ddl.selectedIndex].value;
alert(selectedText);
}
Option 3 - You could also pass the object itself...
<select name="SomeName" onchange="div1(this);">
<option value="someVal">A</option>
<option value="someOtherVal">B</option>
<option value="someThirdVal">C</option>
</select>
function div1(obj)
{
alert(obj.options[obj.selectedIndex].value);
}
getElementsByName returns an array of items, so you'd need:
var select = document.getElementsByName("SomeName");
var text = select[0].options[select[0].selectedIndex].text;
alert(text);
Or something along those lines.
Edit: instead of the "[0]" bit of code, you probably want either (a) to loop all items in the "select" if you expect many selects with that name, or (b) give the select an id and use document.getElementById() which returns just 1 item.
The problem with the original snippet posted is that document.getElementsByName() returns an array and not a single element.
To fix the original snippet, instead of:
document.getElementsByName("SomeName"); // returns an array
try:
document.getElementsByName("SomeName")[0]; // returns first element in array
EDIT: While that will get you up and running, please note the other great alternative answers here that avoid getElementsByName().

Categories

Resources