如何在选择了属性的情况下获取选项的值

Question

我正在尝试获取具有“选定”属性的选项的值，以将其与选定的当前选项进行比较。

 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值即可，通过维护一个数组可以实现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

我认为这是您想要的。 试试吧。

 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>

Answer 4

如果您以后想通过某种方式访问它们，则可以始终存储先前选择的值：工作示例。

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>值即可。 <option>标记上的selected属性仅用于使除<select>默认选项中的第一个<option>元素以外的其他元素，即：

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

选择上面的默认值是2。

Answer 5

我认为Alexis实际上想要更多这样的东西：

 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>

评论结果，如果您还有其他需要，请评论。 乐意效劳。

如何在选择了属性的情况下获取选项的值

问题描述

5 个解决方案

解决方案1
2 2017-02-10 10:02:45

解决方案2
2 2017-02-10 10:10:47

解决方案3
2 2017-02-10 10:14:13

解决方案4
1 2017-02-10 10:06:40

解决方案5
1 已采纳 2017-02-10 10:42:31

如何在选择了属性的情况下获取选项的值

问题描述

5 个解决方案

解决方案1 2 2017-02-10 10:02:45

解决方案2 2 2017-02-10 10:10:47

解决方案3 2 2017-02-10 10:14:13

解决方案4 1 2017-02-10 10:06:40

解决方案5 1 已采纳 2017-02-10 10:42:31

解决方案1
2 2017-02-10 10:02:45

解决方案2
2 2017-02-10 10:10:47

解决方案3
2 2017-02-10 10:14:13

解决方案4
1 2017-02-10 10:06:40

解决方案5
1 已采纳 2017-02-10 10:42:31