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

は良い方法はありませんし、それを取得します。選択はユーザーが変更可能であることを意味します。

あなたが負荷にそれを保存することができ、元の値を保持したい場合：

$(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>