html select - Get the value of the Selected option with JavaScript - Stack Overflow

admin管理员组

文章数量:1336631

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.

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.

• javascript
• html-select

Share Improve this question Follow asked Nov 25, 2020 at 3:40 Abdul WadoodAbdul Wadood 13433 silver badges1414 bronze badges 2

• is that javascript code actually in a function that is called when the user makes a selection? as is, the code will run exactly once before you even get to select anything – Bravo Commented Nov 25, 2020 at 3:47
• Does this answer your question? Get selected value in dropdown list using JavaScript – Gautham Churchill Commented Nov 25, 2020 at 3:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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>

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>

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>

本文标签： html selectGet the value of the Selected option with JavaScriptStack Overflow