We Keep Coding

Getting value from dropdown list. I am trying to get value of dropdown list using Javascript. It keep returning the value of the first option

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

How to get value from multiple SELECT tags (Jquery) [duplicate]

This question already has answers here:
Why does Jquery only affect the first div element? [duplicate]
(4 answers)
Closed 6 years ago.
I'm trying to get the value from each option I select h , but the jquery return the value for the first select only!.
I have no idea how to fix it.
<select id="Group" >
<option value="">Select Group</option>
<option value="1">1</option>
<option value="1">d</option>
<option value="1">d</option>
<option value="1">d</option>
</select>
<select id="Group" >
<option value="">Select Group</option>
<option value="2">1</option>
<option value="2">d</option>
<option value="2">d</option>
<option value="2">d</option>
</select>
Jquery code
<script>
$(document).ready(function(){
$('#Group').change(function(){
var group_id2 = $('#Group').val();
alert(group_id2);
$.ajax({
url:"../include/ajax_process/doc_process.php",
method:"POST",
data:{group_id:group_id},
dataType:"text",
success:function(data)
{
$('#employee').html(data);
}
});
});
});
</script>

Couple of things -
ID should always be unique, so you shouldn't have two elements on the page with the same ID. That said, let's assume you update this a bit and maybe use a class, for example -
$('.group').change(function(){
OK, now you want the value of the CHANGED element. You can do this by looking at the event
$('.group').change(function(e) {
var data = $(e.target).val();
// (etc do the rest of your code here)
});

Event handler on chosen option [duplicate]

This question already has an answer here:
Event Handling when option is selected from dropdown menu
(1 answer)
Closed 6 years ago.
I need to handle alert event on chosen option.
<select>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
For ex., if I choose "B" option, I want alert like "Chosen option is: B", etc...
Thank you!

Try It Once Its Working .
function myFunction() {
var x = document.getElementById("mySelect").value;
alert('You Selected'+' '+x);
}
<p>Select a any value in list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="1">A
<option value="2">B
<option value="3">C
<option value="4">D
</select>

Working example: (It's a jQuery example, using selectors and events basically)
// Wait for DOM load
$(document).ready(function() {
// Binding change event to the <select>
$('#my_select').change(function() {
// Saving the HTML corresponding to the value selected
$selected = $('#my_select option:selected').text();;
// Debugging actual selection DOM-node on console
console.log($('#my_select option:selected'));
// Showing the message
alert("Chosen option is: " + $selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I have set an ID to identify you select -->
<select id="my_select">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="3">D</option>
</select>
Some official jQuery's documentation links:
http://api.jquery.com/category/events/
http://api.jquery.com/category/selectors/

Get value selected in dropdown list using Javascript (displays null) [duplicate]

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());
}

retaining selected dropdown option on postback [duplicate]

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>