jQuery セレクトボックスの選択の値とテキストを取り出す

2023年2月2日

環境
Google Chrome 105.0.5195.127
Windows 10 Home 64bit
jquery 3.6.1

書式
1.選択されているvalue属性値を取り出す
$('[name=セレクトボックスのID名]’).val();

2.選択されている表示文字列を取り出す
$('[name=セレクトボックスのID名]option:selected’).text();
selectタグの属性を指定してval()で値を取得すればよいが、表示文字列を取得したいときはoption:selectedを指定する必要があります。

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('[name=city]').change(function() {
      // 選択されているvalue属性値を取り出す
     var cftval = $('[name=city]').val();
     alert("値: "+cftval); 
     // 選択されている表示文字列を取り出す
     var cfttxt = $('[name=city] option:selected').text();
     alert("テキスト: "+cfttxt); 
   });
});
</script>
</head>
<body>
都市:<select name='city'>
    <option value='101'>tokyo</option>
    <option value='202'>oosaka</option>
    <option value='303'>fukuoka</option>
</select>

</body>
</html>

実行結果
「oosaka」を選択すると、「値:202」、「テキスト:oosaka」が表示されます。

jQuery

Posted by arkgame

Related posts: