Getting the name of a drop-down selection using JavaScript

Question

I'm using JavaScript to pull in some information into a list and I'm not sure how to target a drop-down selection.

This is what I'm using to grab the result of a checked radio button:
RequestType: $("input[name=requestType]:checked").val(),

How would I be able to use the same format to grab the selection of a drop-down?
SessionType:

Possible duplicate of [Get selected value of a dropdown's item using jQuery](https://stackoverflow.com/questions/2780566/get-selected-value-of-a-dropdowns-item-using-jquery) — imvain2, May 21 '19 at 15:45
@grooveplex, since you mentioned me in your comment, note that the question, the answer, and the proposed duplicate all contain jQuery. — isherwood, May 21 '19 at 16:14

score 1 · Accepted Answer · answered May 21 '19 at 15:58

You don't need to call the function on every click, just a listener for the change-event is normally enough. If you also want to get the value of the select-input at other moments, you can save the selected value in an variable or query the input-selects with the :selected-option.

$('#rChoices').on('change', function(event) {
  let value = event.target.value;
  console.log(value);
});

$('#btnGetValue').on('click', function(event) {
  let value = $('#rChoices option:selected').val();
  console.log(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row rChoices">
  <label for="rChoices" class="col-form-label">Please choose a application below:</label>
  <select class="form-control" id="rChoices">
    <option class="" selected disabled>---------</option>
    <option value="onedrive" id="onedrive">OneDrive</option>
    <option value="teams" id="teams">Teams</option>
    <option value="outlook" id="outlook">Outlook</option>
    <option value="officesuite" id="officesuite">Office Suite</option>
    <option value="planner" id="planner">Planner</option>
    <option value="sharepoint" id="sharepoint">SharePoint</option>
    <option value="stream" id="stream">Stream</option>
    <option value="yammer" id="yammer">Yammer</option>
  </select>
  <div class="help-block with-errors"></div>
</div>

<button id="btnGetValue">Get Value</button>

Got it working using `#rChoices :selected` - Thanks for this tho! — Tripp, May 21 '19 at 16:00

score 0 · Answer 2 · answered May 21 '19 at 16:01

0

This worked for my current situation:

SessionType: $('#rChoices :selected').text()

answered May 21 '19 at 16:01

Tripp

67
6

Getting the name of a drop-down selection using JavaScript

2 Answers2