如何获得具有所选属性的选项值

我试图获取具有“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>

来源

2017-02-10 alexis

'opt.value'将*总是*选定的选项，所以我不知道你在这里试图做什么 –

我知道，但如何获得默认选定的值？ – alexis

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

评价的结果，如果你需要什么。乐意效劳。

来源

2017-02-10 10:42:31 user7393973

的JavaScript只，它实际上会检查属性'selected'，不像一些其他的答案。它的工作原理就像你说你愿意，你可以在'selected'更改为任何其他''

这件事情是这样我在寻找，我要把它适应我的真实的语境，非常感谢 – alexis

@alexis - 如果你需要添加更多的''，只需添加一些更'if's和'else's或者使用'case'代替。另外，尝试时，你可以总是使用纯JavaScript，而不是jQuery的，因为即使辛苦也很书面方式少的程序员，这对电脑多看书。祝你的项目好运！ – user7393973

只需添加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>

来源

2017-02-10 10:02:45

那么“selected”的属性是什么？如果OP需要或不需要，我没有理想。 – user7393973

选择的值将被显示在'change' event.The属性'selected'用于最初选择一个值。 –

您可以随时保存先前选择的值，如果你想以某种方式访问它们后面：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

来源

2017-02-10 10:06:40 wscourge

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

来源

2017-02-10 10:10:47 caramba

我认为这是你想要的。尝试一下。

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>

来源

2017-02-10 10:14:13

如何获得具有所选属性的选项值

回答

相关问题