CODEWITHSUNDEEP
javascriptjquerycsshtml
alexis
alexis

Reputation: 73

How to get the value of option with attribute selected

I'm trying to get the value of the option which have the attribute "selected" to compare it to the current option selected.

function onChangeOption(opt) {
  var update_value = opt.value;
  var selectedValue = '???'; // get selected attribute	
  if (update_value != selectedValue) {
    // Do some things    
  }
}
<select class="form-control" onchange="onChangeOption(this)">
  <!-- I wanna got the content of option selected=selected-->
  <option selected="selected" value="1">1</option>
  <option value="2">2</option>
</select>

Upvotes: 1

Views: 884

Answers (5)

user7393973
user7393973

Reputation: 2440

I think alexis actually wants something more like this:

function onChangeOption(opt) {
  var update_value = opt.value;
  var options = document.getElementsByTagName("option");
  if (options[0].getAttribute("selected")=="selected") {
    var selectedValue = options[0].value;
  } else {
    var selectedValue = options[1].value;
  }
  if (update_value != selectedValue) {
    // If the selected option's value is not equal to the value of the option with the attribute "selected", then do... (this way, you can change the attribute to any of the options!)
    console.log(selectedValue);
  }
}
<select class="form-control" onchange="onChangeOption(this)">
  <option selected="selected" value="1">1</option>
  <option value="2">2</option>
</select>

Comment the result and if you need anything else. Glad to help.

Upvotes: 1

Hikmat Sijapati
Hikmat Sijapati

Reputation: 6994

Just add change event listener.And get the selected value.You can achieve comparision between selected value and changed value by maintaining an array.Like below. 

values = []//creates an array

select = document.querySelector('#myselect');
values.unshift(select.value);
//console.log(values);
select.addEventListener('change',function(){
update_value = this.value;
console.log(this.value);
 if (update_value != values[0]) {
   // alert('Not matched');
console.log('Not matched');
  }
  else{
  //alert('Matched');
  console.log('Matched')
  }
});
<select class="form-control" id="myselect">
     <option selected="selected" value="1"> 1 </option> 
     <option value="2"> 2 </option>
</select>

Upvotes: 2

caramba
caramba

Reputation: 22480

// save initial selected value to a variable
var initSelected = $('.form-control option:selected').val();

$('select').on('change', function() {
  // check if the selected value is the same as the initial one was
  if(this.value == initSelected) {
    console.log('same values');
  } else {
    console.log('not same values');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
  <option selected="selected" value="1">1</option>
  <option value="2">2</option>
</select>

Upvotes: 2

Sagar V
Sagar V

Reputation: 12478

I think this is the one what you want. Try it.

function onChangeOption(opt) {
  var update_value = opt.value;
  console.log(update_value);
  var selectedValue;//  = '???'; // get selected attribute	
 // I think this is the one you want
 //If you want to select the HTML element,
  selectedValue=document.querySelector("option[value='"+update_value+"']");

  console.log(selectedValue);
//
  if (update_value != selectedValue) {
    // Do some things    
  }
}
//onChangeOption(document.querySelector('form'));
function start(){
  while(typeof document.querySelector('form')!=typeof {}){}
  onChangeOption(document.querySelector('.form-control'));
}
<body onload="start()">
<select class="form-control" onchange="onChangeOption(this)">
  <option selected="selected" value="1">1</option>
  <!-- I wanna got this -->
  <option value="2">2</option>
</select></body>

Upvotes: 1

wscourge
wscourge

Reputation: 11281

You can always store previously selected values, if you want to access them somehow later on: working example.

HTML:

<select id="mySelect" class="form-control" onchange="onChangeOption(this)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<p>Previous: <span id="prev"></span></p>
<p>Current: <span id="curr"></span></p>

JS:

var selectElem = document.getElementById("mySelect");
var prev = document.getElementById("prev");
var curr = document.getElementById("curr");

var allEverSelected = [ selectElem.value ];

selectElem.addEventListener("change", function(evt){
  allEverSelected.push( this.value );
  prev.innerHTML = allEverSelected[allEverSelected.length - 2];
  curr.innerHTML = allEverSelected[allEverSelected.length - 1];
});

To access default value, just get the <select> value after DOM loads. selected attribute on <option> tag exist only to make other than first <option> element inside <select> default option, i.e.:

<select>
  <option value="1">1</option>
  <option selected value="2">2</option>
</select>

Above select's default value is 2.

Upvotes: 1

Related Questions