optionを動的に追加したプルダウンの値が$("#id").val()で取得できないのはなぜですか。

javascript
1<html>
2<head>
3  </style>
4  <script type="text/javascript"
5   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">  
6  </script>
7  <script type="text/javascript">  
8   $(function(){
9     $("#btn1").on('click',function(){
10       var pulbox = document.getElementById("sel1");
11     //$("#sel1").val()で取得できないのはなぜ？
12       var collor = pulbox.selectedOptions[0].value
13       $(".hoge").css("background-color",collor);
14     })
15   })
16  </script>
17<head/>
18<body>
19<div class="hoge">色変わるよ</div>
20<select id="sel1">
21</select>
22<button id="btn1" type="button">
23<font size="2">ボタン</font>
24</body>
25  <script type="text/javascript"> 
26  //プルダウンの中身[value,text] 
27  var opList = [["赤","red"],["青","blue"],["黄","yellow"],["緑","green"]]
28  for(var i=0;i<opList.length;i++ ){
29    var colorset = opList[i]
30    $("#sel1").append($("<option>").val(colorset[1]).text(colorset[0]));
31  }
32  </script>
33</html>
34

行動規範の内容に同意します

回答4件

attr("value")も試してみたらどうでしょう？

投稿2015/08/10 07:50

S_Minecraft

総合スコア29

あれ？取れないですか？

Javascript
1//$("#sel1").val()で取得できないのはなぜ？
2console.log($("#sel1").val());

ローカルで実行してみましたが、これでコンソールに”red”～”green”まで全て出力されましたよ？
Google chrome バージョン 44.0.2403.130 m です。

投稿2015/08/07 12:05

hirohiro

総合スコア2068

html
1<!DOCTYPE html>
2<html>
3<head>
4  </style>
5  <script type="text/javascript"
6   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">  
7  </script>
8  <script type="text/javascript">  
9   $(function(){
10
11  var opList = {
12		'red' : '赤',
13		'blue' : '青',
14		'yellow' : '黄',
15		'green' : '緑'
16	},
17	optionDOMStr = '',
18	selectElm    = $('#sel1');
19  for( key in opList )
20  {
21    if ( ! opList.hasOwnProperty(key) ) continue;
22    selectElm.append($("<option>").val(key).text(opList[key]));
23  }
24
25
26     $("#btn1").on('click',function(){
27	var color = $('#sel1').val();
28       //var pulbox = document.getElementById("sel1");
29     //$("#sel1").val()で取得できないのはなぜ？
30		//collor typo => color
31       //var collor = pulbox.selectedOptions[0].value
32       //$(".hoge").css("background-color",collor);
33       $(".hoge").css("background-color",color);
34     });
35   })
36  </script>
37<head/>
38<body>
39<div class="hoge">色変わるよ</div>
40<select id="sel1">
41</select>
42<button id="btn1" type="button" style="font-size:10px">ボタン</button>
43<!--
44font タグは非推奨 button閉じたタグなし
45<button id="btn1" type="button">
46<font size="2">ボタン</font>
47-->
48</body>
49</html>

とれるよ

投稿2015/08/07 12:01

nanndemoiikara

総合スコア775

ベストアンサー

$("#sel1").val()で取得出来ました。
Windows7のIE11、chrome、FireFoxで動作確認しましたが
問題のあったデバイスはなんでしょうか？
プログラムはこちらになります。

Javascript
1<html>
2<head>
3  </style>
4  <script type="text/javascript"
5   src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">  
6  </script>
7  <script type="text/javascript">  
8   $(function(){
9     $("#btn1").on('click',function(){
10       $(".hoge").css("background-color", $("#sel1").val());
11     })
12   })
13  </script>
14<head/>
15<body>
16<div class="hoge">色変わるよ</div>
17<select id="sel1">
18</select>
19<button id="btn1" type="button">
20<font size="2">ボタン</font>
21</body>
22  <script type="text/javascript"> 
23  //プルダウンの中身[value,text] 
24  var opList = [["赤","red"],["青","blue"],["黄","yellow"],["緑","green"]]
25  for(var i=0;i<opList.length;i++ ){
26    var colorset = opList[i]
27    $("#sel1").append($("<option>").val(colorset[1]).text(colorset[0]));
28  }
29  </script>
30</html>