[解決済み] 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>
関連
-
[解決済み】React - TypeError: 未定義のプロパティ 'props' を読み取ることができない。
-
フロントエンド非同期(アシンク)ソリューション(全ソリューション)
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み] 選択オプション「selected」を値で設定する
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] jQuery select onChangeの値を取得する。
-
[解決済み] jQueryでドロップダウンリストの選択値を変更する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vueのグローバルがscss(mixin)を導入。
-
vueにおけるv-forループオブジェクトのプロパティ
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】ERROR エラーです。スイッチのname属性が指定されていないフォームコントロールの値アクセッサがない
-
[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
[解決済み] .prop() vs .attr()
-
[解決済み] jQuery ドロップダウンから選択されたオプションを取得する