基本的なことなのですが、色々なサイトを拝見しても解決できず、投稿させて頂きます。
実現したいことは題名の通りなのですが、想定している動きが実現できません。

初期状態

HTML
1<select name="nengo" id="nengo">
2	<option value="明治">明治</option>
3	<option value="大正">大正</option>
4	<option value="昭和" selected>昭和</option>
5	<option value="平成">平成</option>
6</select>

ボタンを押して、下記functionを実行

jQuery
1$('#nengo option').filter(function(index){
2       return $(this).text() === '昭和';
3 }).prop('selected', true);

$("#nengo").val()は昭和となっているのですが、HTML上の表示が明治となってしまいます。
(ちなみにコード上は昭和にselectedが付与されています。)

他にも、function内で下記のようなコードも試してみましたが、いずれも表示が明治になってしまいます。

jQuery
1$('#nengo option:[value="昭和"]').prop('selected',true);

jQuery
1$('#nengo').val('昭和');

いずれも$("#nengo").val()は昭和になっているのですが、表示は明治の状態になります。
ご教示頂ければ幸甚です。

追記
力技で下記のようなコードも試したのですが、やはりHTML上の表示は明治でした。

$("#nengo").empty();
$("#nengo").html('<option value="明治">明治</option><option value="大正">大正</option><option value="昭和" selected>昭和</option><option value="平成">平成</option>');

当然ではありますが、昭和にselectedは付与されております。

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

回答2件

ベストアンサー

普通にできると思いますが、念の為attrもいじってみては？

javascript
1<script>
2$(function(){
3  $('#btn').on('click',function(){
4    $('#nengo option').prop('selected',false).removeAttr('selected').filter(function(){
5      return $(this).text()==='昭和';
6    }).prop('selected',true).attr('selected','selected');
7  });
8});
9</script>
10<select name="nengo" id="nengo">
11    <option value="明治" selected>明治</option>
12    <option value="大正">大正</option>
13    <option value="昭和">昭和</option>
14    <option value="平成">平成</option>
15</select>
16<input type="button" id="btn" value="test">

もし上記でできないばあい以下で動くかテストして結果をお知らせください

javascript
1$(function(){
2  $('#btn').on('click',function(){
3    $('#nengo').get(0).selectedIndex=2;
4  });
5});

投稿2018/08/22 03:36

yambejp

総合スコア117644

k.t.est

2018/08/22 03:46

有難う御座います！初めのもので再現できました！

yambejp

2018/08/22 03:49

ちなみに念の為動作確認した環境を付記してもらえると助かります OS、ブラウザ、およびそれぞれのバージョン

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

サンプル

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div>
9			<select name="gengo" id="gengo">
10				<option value="明治">明治</option>
11				<option value="大正">大正</option>
12				<option value="昭和">昭和</option>
13				<option value="平成">平成</option>
14			</select>
15		</div>
16		<p>
17			<button type="button">明治</button>
18			<button type="button">大正</button>
19			<button type="button">昭和</button>
20			<button type="button">平成</button>
21		</p>
22		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
23		<script type="text/javascript">
24			$(function () {
25				$("button").on('click', function () {
26					var val = $(this).text();
27					$("#gengo").val(val);
28				});
29			});
30		</script>
31	</body>
32</html>

投稿2018/08/22 03:05

退会済みユーザー

総合スコア0

k.t.est

2018/08/22 03:11

ご回答有難う御座います。この内容ですと既に私が試した方法と同じですので、他の方法もしくは私が実行できない理由などをご教示頂けますと幸甚で御座います。

退会済みユーザー

2018/08/22 03:14 編集

サンプルのコードだけで試してもらうと、ちゃんと動くことが確認できると思います。「いずれも$("#nengo").val()は昭和になっているのですが、表示は明治の状態になります。」この現象は発生しません。

k.t.est

2018/08/22 03:15

仰られる通りです。ですので、困っております。恐らくお手元の環境では私が試しているコードのどの方法でも動くのではないかと存じます。

退会済みユーザー

2018/08/22 03:18

提示されているコードが断片的で、検証しようがありません。私が提示したように、HTML丸ごと提示してくれれば、解決の手助けになるかもしれません。今の段階で言えるのは $('#nengo option:[value="昭和"]').prop('selected',true); これは間違っているなということだけ。 $('#nengo option[value="昭和"]').prop('selected',true); こうあるべき

k.t.est

2018/08/22 03:25

ご指摘有難う御座います。やはりそうですよね。HTMLやJSの全部をお伝えすることは難しいです。selectedが付与されているにも関わらず、選択されない理由が分かればと思った次第でした。

退会済みユーザー

2018/08/22 03:27

現象を再現できるミニマムコードを提示してくれればきっとわかるだろうとは思います。回答者の立場としては、「正常に動くコード」はわかるけど、「動かないコード」がどうなっているかなんて、見せてもらわなきゃわかりませんわーっていうところです。

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

あなたの回答