CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
John Doe
John Doe

Reputation: 2060

Javascript Get Option from Dropdownlist based off the Value

How can I get the option in a dropdownlist based off of the value that is selected? Essentially I want to get the option that is selected and then change the innerHTML.

Here is what I have so far..

<select name="ctl00$MainContent$DropDownOutfall" onchange="CheckValueSelected();setTimeout('__doPostBack(\'ctl00$MainContent$DropDownOutfall\',\'\')', 0)" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>

I'm able to get the value of the selected option but I need the option element so that I can update the innerHTML.

$('[id*=DropDownOutfall]').val()

Upvotes: 2

Views: 43

Answers (4)

jaredrethman
jaredrethman

Reputation: 511

Here's one way, in vanilla JS

CheckValueSelected = () => {
  const selVal = document.getElementById('DropDownOutfall');
  console.log(selVal.querySelector(`[value="${selVal.value}"]`));
}
<select onchange="CheckValueSelected()" id="DropDownOutfall" class="form-control" style="">
  <option selected="selected" value="-1">- Select an option -</option>
  <option value="OUTFALL 001">OUTFALL 001</option>
  <option value="OUTFALL 002">OUTFALL 002</option>
  <option value="OUTFALL 004">OUTFALL 004</option>
  <option value="OUTFALL 005">OUTFALL 005</option>
</select>

EDIT 1:

More dynamic approach, which uses the least amount of selectors.

EDIT 2:

More complete example with adding/removing innerText selections and tracking previous states using a data attribute data-current-selection="".

CheckValueSelected = _this => {
  const {
    currentSelection
  } = _this.dataset;
  if (currentSelection !== '') {
    _this.querySelector(`[value="${currentSelection}"]`).innerText = currentSelection;
  }
  const target = _this.querySelector('option:checked');
  _this.dataset.currentSelection = target.value;
  target.innerText += ' selected';
}
<select onchange="CheckValueSelected(this)" data-current-selection="" id="DropDownOutfall" class="form-control">
  <option selected="selected" value="-1">- Select an option -</option>
  <option value="OUTFALL 001">OUTFALL 001</option>
  <option value="OUTFALL 002">OUTFALL 002</option>
  <option value="OUTFALL 004">OUTFALL 004</option>
  <option value="OUTFALL 005">OUTFALL 005</option>
</select>

Upvotes: 0

Bedir
Bedir

Reputation: 586

$('#DropDownOutfall').change(function() {
    var selectedValue = $('#DropDownOutfall').val();
    var selectedOption = $('#DropDownOutfall option[value="' + selectedValue + '"]');
    selectedOption.val("option value");//Changes actual value
    selectedOption.html("option value");//Changes value text
});

Upvotes: 0

Bibberty
Bibberty

Reputation: 4768

Here, this will get selected.

Added a text change for demo.

NOTE: I removed the __doPostBack in the onChange because it does not exist in the snippet. 

function CheckValueSelected() {
  let sel = document.querySelector('#DropDownOutfall');
  let opt = sel.options[sel.selectedIndex];
  opt.text += 'Test Change';
  console.log(opt);
}
<select name="ctl00$MainContent$DropDownOutfall" onchange="CheckValueSelected();" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>

Added this one because Louys is correct, the CSS selector can get you straight to the element.

Good cal Louys! . 

function CheckValueSelected() {
  document.querySelector('#DropDownOutfall option:checked').text += ' - test';
}
<select name="ctl00$MainContent$DropDownOutfall" onchange="CheckValueSelected();" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>

Upvotes: 2

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

First, simply use the id: $('#DropDownOutfall') to lookup the <select> element.

Then, to get the selected option, use .find() and apply .html() (or .text()) on it.

$('#DropDownOutfall').on('change',function(){
  $(this).find('option:selected').html('Hello world');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="ctl00$MainContent$DropDownOutfall" id="DropDownOutfall" class="form-control" style="">
    <option selected="selected" value="-1"></option>
    <option value="OUTFALL 001">OUTFALL 001</option>
    <option value="OUTFALL 002">OUTFALL 002</option>
    <option value="OUTFALL 004">OUTFALL 004</option>
    <option value="OUTFALL 005">OUTFALL 005</option>
</select>

Upvotes: 4

Related Questions