属性を選択してオプションの値を取得する方法

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

だけ選択value.Youは以下array.Likeを維持することによりselected値とchanged値との比較ですが達成でき得るlistener.And changeイベントを追加します。

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属性、すなわち、<select>デフォルトのオプション内の最初の<option>要素以外にするためにのみ存在しますの選択デフォルト値を上回る

<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

であるIこれがあなたが望むものだと思います。それを試してみてください。

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>