I`ve a "select":
<select class="date-select2" name="date">
<option selected="selected" value="">All</option>
<option value="11-2015">11-2015</option>
<option value="10-2015">10-2015</option>
<option value="09-2015">09-2015</option>
<option value="07-2015">07-2015</option>
<option value="06-2015">06-2015</option>
<option value="04-2015">04-2015</option>
<option value="03-2015">03-2015</option>
</select>
When I`m try to get value of select,
document.getElementsByClassName('date-select2')[0].value
it normally returns a value of selected item in Chrome. In FF and Safari sometimes it returns an empty string, when selected a numeric value(not "All").
How to deal with it?
I think this might help you:
HTML
<select class="date-select2" name="date" onchange="myFunction(this.value)">
<option selected="selected" value="">All</option>
<option value="11-2015">11-2015</option>
<option value="10-2015">10-2015</option>
<option value="09-2015">09-2015</option>
<option value="07-2015">07-2015</option>
<option value="06-2015">06-2015</option>
<option value="04-2015">04-2015</option>
<option value="03-2015">03-2015</option>
</select>
JavaScript
function myFunction(curValue) {
alert(curValue);
}
Working : Fiddle
Note: Also remember to put your JavaScript code inside body also right before it ends.
var select = document.querySelector('select.date-select2');
// add onchange handler
select.onchange = function(){
var idx = select.selectedIndex;
var val = select.options[idx].value;
// if All is selected use text of option
if(val=="")
val = select.options[idx].textContent;
};
You can try this way to get selected item:
$(".date-select2 option:selected").text();
Related
I have dynamically generated the following dropdown list using jquery for the calculator app I am currently making:
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
What now I try is to access the value attribute of every option, but I don't get far. The examiner is showing the value attribute in the elements tab, I can also find under the options when I look at the properties in the browser, but I am unable to access them via JavaScript.
I tried:
const leftVal = $('#field__left').children('option').attr('value');
also
const leftVal = $('#field__left').children('option').data('value');
but it returned undefined, while:
const leftVal = document.querySelector('#field__left').getAttribute('value');
gave me null.
Anybody has the ide where my mistake lies?
Thank you in advance.
I try is to access the value attribute of every option
You need a loop...
$("#field__left option").each(function(){
console.log($(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select type="text" id="field__left">
<option label="Please choose an unit!" text="Please choose an unit!"></option>
<option label="inch" text="Inch" value="0.0254"></option>
<option label="foot" text="Foot" value="0.3048"></option>
<option label="yard" text="Yard" value="0.9144"></option>
<option label="rod" text="Rod" value="5.0292"></option>
<option label="chain" text="Chain" value="20.1168"></option>
<option label="furlong" text="Furlong" value="201.168"></option>
<option label="mile" text="Mile" value="1609.344"></option>
<option label="cable" text="Cable" value="185.2"></option>
<option label="nautical mile" text="Nautical mile" value="1852"></option>
<option label="shipday" text="Shipday" value="185200"></option>
</select>
$('#field__left').children('option') will return an array of all select option nodes, you have to iterate through it to get values of each option
Here is the simple solution
// get list of an options
var options = $('#field__left option');
// Then, convert that into an array of just the values
var values = $.map(options, e => $(e).val())
console.log(values)
We can print the value of select option using
document.querySelector(".choose").value; but I need the name of it's corresponding value
Ex: If the value of select is "VAR CHAR" but you need to print the name as text
<select name='choose' class='choose'>
<option name='text'>VAR CHAR</option>
<option name='number'>NUMBER</option>
<option name='radio'>RADIO</option>
<option name='checkbox'>CHECK BOX</option>
<option name='email'>EMAIL</option>
<option name='file'>FILE</option>
<option name='date'>DATE</option>
<option name='password'>PASSWORD</option>
<option name='range'>RANGE</option>
<option name='tel'>TELEPHONE</option>
<option name='submit'>SUBMIT</option>
<option name='button'>BUTTON</option>
<option name='reset'>RESET</option>
</select>
just tried something..
document.querySelector('.choose').selectedOptions[0].getAttribute('name');
You select element has a class by the name of "choose" and you can use the following code which was written by jquery.
$('.choose').on('change', function() {
var selectedOption = $(this).find('option:selected');
name = selectedOption.attr('name');
});
Looks like you know how to select the element already. Now all you need to do is
var name = element.getAttribute("name");
and then print it.
I try to get the selected value of the dropdown. But it keeps returning the first option value although I may choose different values. Is there any error in the code that makes this error?
<select id="category" name="category">
<option disabled selected value> -- select an option -- </option>
<option value=1>Rock</option>
<option value=2>Classical</option>
<option value="Country">Country</option>
<option value="Folk">Folk</option>
<option value="EDM">EDM</option>
<option value="Heavy Metal">Heavy Metal</option>
<option value="Hip-hop">Hip-hop</option>
<option value="Jazz">Jazz</option>
<option value="Pop">Pop</option>
<option value="Popular">Popular</option>
<option value="Rap">Rap</option>
<option value="Soul">Soul</option>
</select>
function Ulog() {
var select_id = document.getElementById("category");
select_id.options[select_id.selectedIndex].value;
}
This is because you are not listening to change event
try this
const select_id = document.getElementById("category");
select_id.addEventListener('change', evt => {
console.log(select_id.selectedOptions[0].value);
});
I hope this will help
I'm working on using the select tag to know which attribute to assign a value.
<select>
<option value="selStr">STR</option>
<option value="selDex">DEX</option>
<option value="selInt">INT</option>
<option value="selWis">WIS</option>
<option value="selCon">CON</option>
<option value="selCha">CHA</option>
</select>
How do I send the information to JavaScript to know which has been selected?
I've gotten it working with the help of Zero298, but thanks to everyone who is putting different ways to do this!
Start by giving your select an Id
<select id="mySelect">
<option value="selStr">STR</option>
<option value="selDex">DEX</option>
<option value="selInt">INT</option>
<option value="selWis">WIS</option>
<option value="selCon">CON</option>
<option value="selCha">CHA</option>
</select>
Then in your script do the following:
var e = document.getElementById("mySelect");
var selectedValue = e.options[e.selectedIndex].value;
selectedValue will be the string that is in the value attribute of the selected option.
<select onchange="alert(this.options[this.selectedIndex].value)" >
JSFIDDLE
I get a HTML string like this. I want to get the selected value, which, in this case is AN:
<SELECT id=ddl_Freq name=ddl_Freq><OPTION selected value=AN>Annually</OPTION> <OPTION value=BM>Bi-Monthly</OPTION> <OPTION value=MO>Monthly</OPTION> <OPTION value=OT>One Time</OPTION> <OPTION value=QT>Quarterly</OPTION> <OPTION value=WE>Weekly</OPTION></SELECT>
which when formatted looks like this:
<SELECT id=ddl_Freq name=ddl_Freq>
<OPTION selected value=AN>Annually</OPTION>
<OPTION value=BM>Bi-Monthly</OPTION>
<OPTION value=MO>Monthly</OPTION>
<OPTION value=OT>One Time</OPTION>
<OPTION value=QT>Quarterly</OPTION>
<OPTION value=WE>Weekly</OPTION>
</SELECT>
I tried these two approaches, but I wasn't successful.
Approach 1: JavaScript
DdlHtml = document.createElement('select');
DdlHtml.innerHTML = RawDdlString;
item = DdlHtml.options[DdlHtml.selectedIndex].value;
This fails because the string already contains <SELECT> and </SELECT> tags.
Approach 2: jQuery
DdlHtml2 = $.parseHTML(RawDdlString);
item = DdlHtml2.options[DdlHtml2.selectedIndex].value;
This also didn't work as DdlHtml2.options is undefined.
How do I parse this string which contains HTML for a dropdownlist in either Javascript or jQuery?
Wrap the string in a jQuery selector:
$(function() {
var $select = $("<SELECT id=ddl_Freq name=ddl_Freq><OPTION selected value=AN>Annually</OPTION> <OPTION value=BM>Bi-Monthly</OPTION> <OPTION value=MO>Monthly</OPTION> <OPTION value=OT>One Time</OPTION> <OPTION value=QT>Quarterly</OPTION> <OPTION value=WE>Weekly</OPTION></SELECT");
console.log($select.val());
});
Here is an example fiddle
Using jQuery
$('#ddl_Freq').val()
without jQuery,
<SELECT id=ddl_Freq name=ddl_Freq>
<OPTION selected value=AN>Annually</OPTION>
<OPTION value=BM>Bi-Monthly</OPTION>
<OPTION value=MO>Monthly</OPTION>
<OPTION value=OT>One Time</OPTION>
<OPTION value=QT>Quarterly</OPTION>
<OPTION value=WE>Weekly</OPTION>
</SELECT>
var x = document.getElementById("ddl_Freq");
x.options[x.selectedIndex].value;
Output:
"AN"
link to jsbin snippet:
http://jsbin.com/omuxow/1/edit