2017-02-10 3 views
0

"selected"속성을 가진 옵션의 값을 가져와 현재 선택된 옵션과 비교하려고합니다. 선택한 속성 값을 얻는 방법

+2

'opt.value'는 항상 * 선택된 * 옵션이 될 것이므로, 당신이 여기서하려고하는 것이 확실하지 않습니다. –

+0

기본 선택 값을 얻는 방법은 알고 있지만 어떻게해야합니까? – alexis

+1

@alexis를로드 할 때 저장하거나, 기본값 인 경우 선택의 첫 번째 옵션을 얻습니다. –

답변

0

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>

나는 알렉시스 실제로 더 이런 일을하고자 생각합니다. 기꺼이 도와주세요.

+0

JavaScript 만 있고 실제로 다른 답변과 달리 'selected'속성을 확인합니다. 그것은 당신이 원한 것처럼 작동합니다. 선택 항목을 [변경되지 않기 때문에]'

+0

그건 내가 뭘 찾고 있었는지, 내 실제 상황에 맞춰서 고마워. – alexis

+1

@alexis - ''을 더 추가해야한다면,'if's와'else's를 더 추가하면된다. 대신에'case '를 사용하십시오. 또한 jQuery가 아니라면 언제나 순수한 JavaScript를 사용하도록 노력하십시오. 프로그래머에게 쓰기가 적기 때문에 컴퓨터에 대한 독서가 더 많기 때문입니다. 프로젝트에 행운을 비네! – user7393973

2

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>

그냥 선택한 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>

+0

그러면 'selected'속성은 무엇입니까? 나는 그것이 OP가 원하거나 가지지 않는 것이라면 이상이 없다. – user7393973

+0

선택한 값이'change' 이벤트에 표시됩니다.'selected' 속성은 처음에 값을 선택하는 데 사용됩니다. –

1

당신은 항상 이전에 선택한 값을 저장할 수 : 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> 값을 얻을 기본 값에 액세스 할 수 있습니다. 의 선택 기본값 위

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

2.

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>

2

I입니다 : 태그 만 존재 <option>selected 속성 즉, 첫째 <option> 요소 <select> 내부의 기본 옵션 이외 만들려면 이것이 당신이 원하는 것라고 생각하십시오. 시도 해봐.

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>

코멘트 결과와 경우에 당신은 무엇을해야

관련 문제