1. ホーム
  2. javascript

[解決済み] jQuery - セレクトコントロールの選択値をテキスト記述で設定する

2022-03-17 10:25:16

質問

セレクトコントロールがあり、javascriptの変数にテキスト文字列があります。

jQueryを使用して、セレクトコントロールのselected要素を、私が持っているテキスト記述の項目(私が持っていない値とは対照的)に設定したいと思います。

値で設定するのはとてもつまらないことだとわかっています。

$("#my-select").val(myVal);

しかし、テキスト記述で行うのは少し困っています。テキストディスクリプションから値を取り出す方法があるはずなのですが、私の脳みそは金曜日の午後すぎて、うまくいきません。

どのように解決するのですか?

jQuery v1.6+の記述で選択する。

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).prop('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

jQueryのバージョン1.6未満、1.4以上

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).attr('selected', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

この方法は、1.6 以上 1.9 未満のバージョンでは動作しますが、1.6 以降は非推奨であることに注意してください。それは は機能しません をjQuery 1.9+で使用することができます。


旧バージョン

val() は両方のケースを処理する必要があります。

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>