This question already has answers here:
keep user checked radiobtn checked even after postback
(2 answers)
Closed 5 months ago.
How do I retain whatever was selected from the dropdown even after page refresh so user knows what he/she selected using jquery? or javascript?
<select id="hospitalDropDown" onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option disabled="disabled">Select Hospital</option>
<option value="http://mysite.com/events/Pages/default1.aspx">All Hospitals</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Dyer">Dyer</option>
<option value="http://mysite.com/events/Pages/default1.aspx?hos=Carmel">Carmel</option>
</select>
Try this:
<select id="hospitalDropDown" onchange="window.open('http://mysite.com/events/Pages/default1.aspx?hos='+this.value,'_top')">
<option disabled="disabled">Select Hospital</option>
<option value="All">All Hospitals</option>
<option value="Dyer">Dyer</option>
<option value="Carmel">Carmel</option>
</select>
$(document).ready(function(){
var value = window.location.href.match(/[?&]hos=([^&#]+)/) || [];
$('#hospitalDropDown').val(value[1]);
});
<select id="hospitalDropDown">
<option value="">All Hospitals</option>
<option value="Dyer">Dyer</option>
<option value="Carmel">Carmel</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#hospitalDropDown').val('<?php echo $_GET['hos']; ?>');
$('#hospitalDropDown').change(function() {
location.href = 'http://mysite.com/events/Pages/default1.aspx?hos=' + $(this).val();
});
});
</script>
Related
This question already has answers here:
jQuery select option elements by value
(9 answers)
Closed 1 year ago.
Suppose the below HTML dropdown:
I am looking for the javascript to get desired option text base on its value.
Like if asked for what is the text on value="2"?
Answer: "Value 2"
I tried the below jquery code:
$(document).ready(function() {
var value = "2";
// I am getting an error as a output on console
var textValue = $("#test").options[value.selectedIndex].text;
console.log(textValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test" name="test">
<option value="0">Select Value...</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
This should work for you:
$(document).ready(function () {
var value = "2";
// I am getting "0" as a output on console
var textValue = $("#test>option[value=" + value + "]").html();
console.log(textValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="test" name="test">
<option value="0">Select Value...</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
<option value="3">Value 3</option>
</select>
This question already has answers here:
get multiple values from dropdownlist in JavaScript
(3 answers)
Closed 3 years ago.
How do I get the selected value from a dropdown list in case there are more than one selected item using JavaScript? For example:
<select name"nana" id="nana">
<option value="0"</option>
<option value="1"</option>
<option selected="selected" value="2"</option>
<option value="3"</option>
<option selected="selected" value="4"</option>
</select>
I tried:
var e = document.getElementById("nana");
var strUser = e.options[e.selectedIndex].value;
and
document.querySelector("nana").value;
but it returns only the first selected value (2). How can I get all of the selected values?
add multiple="multiple" for multiple for more than 1 select
var selectNana = document.getElementById("nana");
var selectedNana = [];
for (var i = 0; i < selectNana.length; i++) {
if (selectNana.options[i].selected) selectedNana.push(selectNana.options[i].value);
}
console.log(selectedNana);
<select name"nana" id="nana" multiple="multiple" >
<option value="0">0</option>
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
</select>
First make sure your HTML syntax is correct - open tags, like <option, need closing >s too.
Use the query string #nana > option[selected] to select children with the selected attribute, then map to their values:
const selectedValues = Array.from(
document.querySelectorAll('#nana > option[selected]'),
option => option.value
);
console.log(selectedValues);
<select name="nana" id="nana">
<option value="0"></option>
<option value="1"></option>
<option selected="selected" value="2"></option>
<option value="3"></option>
<option selected="selected" value="4"></option>
</select>
This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 6 years ago.
I need to access the value selected from a drop down list using Javascript. But every time I get 'null' as the answer though a list item is selected.
My HTML page:
<select class="mySelect">
<option value="st1" selected="selected">Create new Stream</option>
<option value="st1">Stream 1</option>
<option value="st2">Stream 2</option>
<option value="st3">Stream 3</option>
<option value="st4">Stream 4</option>
</select>
<input type="button" value="show attributes" class="panel-button-attr" onclick="choice()">
When the above button is clicked, the selected value should be alerted to the user. So in my Javascript function:
function choice() {
var choice=document.getElementById("mySelect");
alert(choice);
var strUser = choice.options[choice.selectedIndex].text;
alert(strUser.toString());
}
Here, I've tried to use the first alert to check if any selected list item is identified correctly. But, at this point, it displays null and the strUsr line doesn't run at all.
I know this is actually a trivial task but am finding it hard to figure this inconsistency.
Please change your HTML element attribute.
You've mentioned 'mySelect' as class and in JS, you are calling it with ID reference.
You have to specify id of select element
<select class="mySelect" id="mySelect">
follow the code:
you need to give id to dropdown because you try to get data by id so...
<select id="mySelect" class="mySelect">
<option value="st1" selected="selected">Create new Stream</option>
<option value="st1">Stream 1</option>
<option value="st2">Stream 2</option>
<option value="st3">Stream 3</option>
<option value="st4">Stream 4</option>
</select>
I hope this will solve your issue....
Thanks...
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
plunker: https://plnkr.co/edit/Q7yyVvUTaLYvPaDW5j7G?p=preview
<select id="mySelect" class="mySelect" >
<option value="st1" selected="selected">Create new Stream</option>
<option value="st1">Stream 1</option>
<option value="st2">Stream 2</option>
<option value="st3">Stream 3</option>
<option value="st4">Stream 4</option>
</select>
function choice() {
var choice=document.getElementById("mySelect");
alert(choice.value); // get value
var strUser = choice.options[choice.selectedIndex].text;
alert(strUser.toString());
}
You didn't have id in your html ,so I try by class name..
function choice() {
var choice=document.getElementsByClassName("mySelect");
var strUser = choice[0].options[choice[0].selectedIndex].text;
alert(strUser.toString());
}
This question already has answers here:
Change the selected value of a drop-down list with jQuery
(18 answers)
Closed 7 years ago.
I'm trying to figure out a way to automatically select an option, based on a passed variable, that matches only the value of that option.
JS Fiddle Link Demo
<label>
<span>Font Type</span>
<select id="options>
<option value="one">One</option>
<option value="two" selected>Two</option>
<option value="three">Three</option>
</select>
</label>
function loadSelect(userFont){
$('#options').find('option[value='+userFont+']').attr('selected', 'selected');
}
loadSelect(three);
Just set the value on the <select> tag:
$('#options').val(userFont);
$(function() {
$("#options").val("three");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="options">
<option value="one">One</option>
<option value="two" selected>Two</option>
<option value="three">Three</option>
</select>
This question already has answers here:
Get selected value in dropdown list using JavaScript
(33 answers)
Closed 9 years ago.
I have created a simple drop down menu using JavaScript where it displays the month of the year. Each option has a value. When using the onchange function to call another function count, I am unable to read the value of the drop down menu.
Function count:
<script language="javascript" type="text/javascript">
function count(){
debugger;
alert(lst_MonthDrop.value);
}
</script>
Drop down menu:
<select name="lst_MonthDrop"
style="background-color:#FF9933; color:#FFF; border:none; border-radius:5px;"
onchange="count()">
<option> When do you want to go?</option>
<option value="2014-01-01">January</option>
<option value="2014-02-01">Feburary</option>
<option value="2014-03-01">March</option>
<option value="2014-04-01">April</option>
<option value="2014-05-01">May</option>
<option value="2014-06-01">June</option>
<option value="2014-07-01">July</option>
<option value="2014-08-01">August</option>
<option value="2014-09-01">September</option>
<option value="2014-10-01">October</option>
<option value="2014-11-01">November</option>
<option value="2014-13-01">December</option>
</select>
JSFIDDLE
Modify the onchange to call count(this)
<select name="lst_MonthDrop" style="background-color:#FF9933; color:#FFF; border:none; border-radius:5px;" onchange="count(this)">
<option> When do you want to go?</option>
<option value="2014-01-01">January</option>
<option value="2014-02-01">Feburary</option>
<option value="2014-03-01">March</option>
<option value="2014-04-01">April</option>
<option value="2014-05-01">May</option>
<option value="2014-06-01">June</option>
<option value="2014-07-01">July</option>
<option value="2014-08-01">August</option>
<option value="2014-09-01">September</option>
<option value="2014-10-01">October</option>
<option value="2014-11-01">November</option>
<option value="2014-13-01">December</option>
</select>
Then give the count function an argument:
function count(s){
alert(s.value);
}
When the onchange event is called it will pass a reference to the select element and you can then get the value from that reference.
Give your select an id and retrieve the content like:
var lst_MonthDrop = document.getElementById('lst_MonthDrop');
alert(lst_MonthDrop.options[lst_MonthDrop.options.selectedIndex].innerHTML);
Give the select an ID: <select name="lst_MonthDrop" id="first-month"> and try again with this function:
function count(){
var firstMonth = document.getElementById('first-month');
// Value of the selected option
alert(firstMonth.value);
// Text of the selected option
alert(firstMonth.options[firstMonth.selectedIndex].text);
}