HTML 선택 요소의 미리 선택된 값 얻기

Question

예를 들어, 사용자가 그것을 변경했는지 상관없이 JavaScript 또는 jQuery를 통해 "c"를 검색하는 방법은 무엇입니까?

<select id="select-menu"> 
    <option value="a">A</option> 
    <option value="b">B</option> 
    <option value="c" selected>C</option> 
    <option value="d">D</option> 
</select> 

그러나 다음과 같이 시도했지만 현재 선택된 메뉴의 값을 반환합니다. 나는 페이지로드시 실행되고 값을 저장하는 비슷한 접근법을 취할 수 있다고 생각하지만 그렇게하기위한 "적절한"방법이있을 것으로 기대한다.

$('#select-menu > option').each(function(i){ 
    if(this.selected) { 
     console.log(this.value) 
     $("#submit").val(this.value); 
     return false; 
    } 
}) 

Answer 1

사용의 jQuery .attr() 초기 값을 얻을 수 있습니다 :

function get_initial(){ 
 

 
    $('#select-menu > option').each(function(i){ 
 
    
 
     if($(this).attr('selected')) { 
 
      console.log('initial: ' + this.value) 
 
     } 
 

 
     if(this.selected) { 
 
      console.log('current: ' + this.value) 
 
     } 
 
    
 
    }) 
 

 
} 
 

 
$('.initial').on('click', get_initial);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select-menu"> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c" selected>C</option> 
 
    <option value="d">D</option> 
 
</select> 
 

 
<button class="initial">check initial</button>

Answer 2

당신은 HTML5 데이터 -에 값을 절약 할 수 * 속성 :

<select id="select-menu" data-default="c"> 

그리고

$("#select-menu").attr("data-default"); 

Answer 3

더 좋은 방법은 없습니다로 그것을 얻을. select는 사용자가 수정할 수있는 것을 의미합니다. 원래 값을 유지하려면

당신은 부하에 저장 수 :

이

$(document).ready(function() { 
    var initialValue = $("#select-menu").val(); 
}); 

또한 숨겨진 입력에 쓸 수 :

<input type="hidden" name="initial-select-menu" value="c"> 

이 방법은 그 이점이있다 값은 나머지 양식과 함께 제출됩니다. 어떤 경우에는 바람직 할 수 있습니다.

또는 당신은 data 속성에서 그 초기 값을 채울 수 :

<select id="select-menu" data-initial="c"> 
    <option value="a">A</option> 
    <option value="b">B</option> 
    <option value="c" selected>C</option> 
    <option value="d">D</option> 
</select> 

Answer 4

다음 코드를 JavaScript를 사용하여 선택 필드에서 값을 가져 오는 것과 관련된 다양한 예제를 보여줍니다.

작업 발췌문

const selectMenu = document.getElementById("select-menu"); 
 

 
var selectedIndex = selectMenu.options[selectMenu.selectedIndex].value; 
 

 
/*Option 1*/ 
 
selectMenu.onchange = function() { 
 
    selectedIndex = selectMenu.options[selectMenu.selectedIndex].value; 
 
} 
 

 
/*Option 2*/ 
 
/*selectMenu.addEventListener("change", function(){ 
 
    selectedIndex = selectMenu.options[selectMenu.selectedIndex].value; 
 
})*/ 
 

 
/*Option 3*/ 
 
/*function updateSelectedIndex() { 
 
    selectedIndex = selectMenu.options[selectMenu.selectedIndex].value; 
 
}*/ 
 

 
document.writeln(selectedIndex);

<!-- Option 3 --> 
 
<!-- <select id="select-menu" onchange="updateSelectedIndex"> --> 
 
<select id="select-menu"> 
 
    <option value="a">A</option> 
 
    <option value="b">B</option> 
 
    <option value="c" selected>C</option> 
 
    <option value="d">D</option> 
 
</select>