Question

我正在尝试获取具有“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>

Answer 1

只需添加change事件侦听器。并获取所选值。您可以通过维护数组来实现selected值和changed值之间的比较。如下所示。

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>

Answer 2

// 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>

Answer 3

我认为这就是你想要的。试试吧。

＆＃13;

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'));
}

＆＃13;

<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>

＆＃13;

Answer 4

如果您想稍后以某种方式访问它们，您可以随时存储以前选择的值：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];
});

要访问默认值，只需在DOM加载后获取<select>值。 selected标记上的<option>属性只存在于<option>默认选项中的第一个<select>元素之外，即：

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

以上选择的默认值为2。

Answer 5

我认为亚历克西斯实际上想要更像这样的东西：

＆＃13;

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);
  }
}

＆＃13;

<select class="form-control" onchange="onChangeOption(this)">
  <option selected="selected" value="1">1</option>
  <option value="2">2</option>
</select>

＆＃13;

评论结果以及是否还需要其他任何内容。很高兴帮忙。

如何获取选中属性的选项值

5 个答案: