如何獲得具有所選屬性的選項值

Question

我試圖獲取具有「selected」屬性的選項的值，以將其與選定的當前選項進行比較。

function onChangeOption(opt) { 
 
    var update_value = opt.value; 
 
    var selectedValue = '???'; // get selected attribute \t 
 
    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

我認爲亞歷克西斯實際上想要更多的東西是這樣的：

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>

評價的結果，如果你需要什麼。樂意效勞。

Answer 2

只需添加change事件listener.And獲取選中value.You可以通過以下維持array.Like實現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 3

您可以隨時保存先前選擇的值，如果你想以某種方式訪問​​它們後面：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>值。在<option>標籤只存在 selected屬性，使除第一<option>元素內<select>默認選項，即：

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

選擇以上的默認值是2

Answer 4

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

我認爲這是你想要的。嘗試一下。

function onChangeOption(opt) { 
 
    var update_value = opt.value; 
 
    console.log(update_value); 
 
    var selectedValue;// = '???'; // get selected attribute \t 
 
// 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>