How do I get the selected value from a dropdown list using JavaScript?
I tried the Method blow:
<div class="form-group">
<select class="form-control" id="naan" name="naan">
<option selected="selected" disabled="disabled" value="">Choose Naan</option>
<option value="No Naan" style="font-size: 14px">No Naan</option>
<option value="Naan" style="font-size: 14px">Naan</option>
<option value="Garlic Naan" class="red">Garlic Naan +$1.00</option>
<option value="Roti" style="font-size: 14px">Roti</option>
</select>
</div>
var e = document.getElementById("naan");
var strUser = e.options[e.selectedIndex].value;
console.log('You selected: ', strUser);
It only selects the first option when I click the select box to select option. It returns "Choose Naan". If I remove first option then it returns "No Naan" instead of the value I select.
add an event listener and check the target node value to get the value of input...
<div class="form-group"> <select class="form-control" id="naan" name="naan"> <option selected="selected" disabled="disabled" value=""> Choose Naan </option> <option value="No Naan" style="font-size: 14px">No Naan</option> <option value="Naan" style="font-size: 14px">Naan</option> <option value="Garlic Naan" class="red">Garlic Naan +$1.00</option> <option value="Roti" style="font-size: 14px">Roti</option> </select> </div> <script> var e = document.getElementById("naan"); // Add add an EventListener and check the value in the target node... e.addEventListener("change", function (event) { console.log(event.target.value); }); </script>
Your strUser
appears to be being called directly from the page itself; as such, it only gets set when the page is rendered (and the user has yet to make their choice). What you want to do is run this block of code inside of a function that gets called when the value changes.
For example, you could add this in a function for e.onchange
:
var e = document.getElementById("naan"); e.onchange = function() { var strUser = e.options[e.selectedIndex].value; console.log('You selected: ', strUser); }
<div class="form-group"> <select class="form-control" id="naan" name="naan"> <option selected="selected" disabled="disabled" value="">Choose Naan</option> <option value="No Naan" style="font-size: 14px">No Naan</option> <option value="Naan" style="font-size: 14px">Naan</option> <option value="Garlic Naan" class="red">Garlic Naan +$1.00</option> <option value="Roti" style="font-size: 14px">Roti</option> </select> </div>
You can capture the value of the selected option via the change
event. In the example below, this is done by adding onchange="getSelectedValue(event)"
to the select
element.
function getSelectedValue(e) { console.log(e.target.value); }
<div class="form-group"> <select class="form-control" id="naan" name="naan" onchange="getSelectedValue(event)"> <option selected="selected" disabled="disabled" value="">Choose Naan</option> <option value="No Naan" style="font-size: 14px">No Naan</option> <option value="Naan" style="font-size: 14px">Naan</option> <option value="Garlic Naan" class="red">Garlic Naan +$1.00</option> <option value="Roti" style="font-size: 14px">Roti</option> </select> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.