select タグに基づいてデフォルトの選択されたオプションを設定するにはどうすればよいですか?

以下に、select タグのデフォルトの選択済みオプションを設定する方法に関する記事を共有します。これは優れた参考値であり、皆様のお役に立てれば幸いです。

方法は2つあります。

タイプ1の属性で選択した項目を設定するメソッドです。phpなどの動的言語において、必要に応じて出力結果をバックグラウンドで制御することができます。

< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" selected = "selected" >2</ option >
< option value = "3" >3</ option >
</ select >

2 番目の は、フロントエンド js を通じて選択された項目を制御することです:

< script type = "text/javascript" >
function change(){
  document.getElementById("sel")[2].selected=true;
}
</ script >
< select id = "sel" >
< option value = "1" >1</ option >
< option value = "2" >2</ option >
< option value = "3" >3</ option >
</ select >
< input type = "button" value = "修改" onclick = "change()" />

ラベルの選択された項目のテキストを取得するための JS コードは:

var val = document.all.Item.options[document.all.Item.selectedIndex].text
var i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value;

タグを操作するためのその他のヒントは次のとおりです:

1) select を動的に作成します

function createSelect(){
var mySelect = document.createElement( "select" );
mySelect.id = "mySelect" ;
document.body.appendChild(mySelect);
}

2) オプション option を追加します

function addOption(){
//根据id查找对象，
var obj=document.getElementById( 'mySelect' );
//添加一个选项
obj.add( new Option( "文本" , "值" ));
}

3 ) すべてのオプションを削除option

function removeAll(){
var obj=document.getElementById( 'mySelect' );
obj.options.length=0;
}

4) オプションを1つ削除option

function removeOne(){
var obj=document.getElementById( 'mySelect' );
//index,要删除选项的序号，这里取当前选中选项的序号
var index=obj.selectedIndex;
obj.options.remove(index);
}

5) オプションの値を取得option

りー

6) オプションoptionの取得

var obj=document.getElementById( 'mySelect' );
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].value;

7) オプションoptionの変更

var obj=document.getElementById( 'mySelect' );
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index].text;

8) 削除select

var obj=document.getElementById( 'mySelect' );
var index=obj.selectedIndex; //序号，取当前选中选项的序号
var val = obj.options[index]= new Option( "新文本" , "新值" );

上記は私が皆さんのためにまとめたので、将来的に皆さんのお役に立つことを願っています。

関連記事:

axios を介して post リクエストを送信し、springMVC がパラメータを受信できないことが判明する (詳細なチュートリアル)

vue を介して axios コンポーネントを追加して、post の null パラメータの問題を解決する (詳細なチュートリアル)

vue の axios を介したポストリクエストパラメータの処理 (詳細なチュートリアル)

以上がselect タグに基づいてデフォルトの選択されたオプションを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

select 設定 デフォルト

ソース：php.cn

前の記事：Vue を使用して動的にフォームを生成する方法 次の記事：JSでconsole['']入力メソッドを使用する方法

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• weebox でポップアップ ウィンドウが中央に配置されない問題
  2018-06-23 18:19:43
• vue+canvas で Excel のようなコンポーネントを使用する方法
  2018-06-23 18:17:39
• JavaScriptでクラスを呼び出す方法
  2018-06-23 18:11:37
• Vueフレームワークを使用したプルアップリフレッシュ機能の実装方法
  2018-06-23 18:10:14
• Vueモバイルターミナルを使用した画像切り抜きコンポーネントの実装方法
  2018-06-23 18:06:43
• WeChat ミニ プログラム テンプレートとモジュールの使用法について (詳細なチュートリアル)
  2018-06-23 18:04:28
• vue2にプルアップロード機能を実装する方法
  2018-06-23 18:02:45
• Vue2を使った3階層連携の実装方法
  2018-06-23 18:00:45
• vue2でデータリクエスト表示読み込みグラフを実装する方法
  2018-06-23 17:58:23
• エレメントフルスクリーンを使用して設定および監視する方法
  2018-06-23 17:56:41

最新の問題

変更時に v-for の選択オプション値としてキーを渡す方法 (VueJS) Vue3とBootstrap5を使用しています。複数のオプションがある選択があります。今、option.TEXT を表示しています。何かを変更すると、この値もメソッドに渡されます。...

から 2023-11-17 08:55:24

0

1

276

更新時に MySQL が読み込まれないようにする 単純なクエリが 2 つあり、1 つはテーブルを読み取るクエリ、もう 1 つはテーブルを更新するクエリです。更新クエリの実行中に選択クエリの読み取りをロックする方法。 MySQLIn...

から 2023-11-07 18:05:53

0

1

203

PHP を使用して CSV エクスポート (MYSQL) の列名とデータを取得する PHP 経由で MYSQL データベースを CSV にエクスポートする方法が必要ですが、列名を選択する必要もあります。これまでのところ、列名の取得以外に必要なすべてを行う次のものが...

から 2023-11-04 21:59:58

0

2

279

MySQL: ORDER BY 句で CASE を使用する方法 入力に基づいて行をフィルタリングした後にテーブルを返す必要があるストアド プロシージャがあります。入力のうち 2 つは、sort_column と sort_dir です。クエリは...

から 2023-11-01 17:44:15

0

1

171

言い換えたタイトルは次のとおりです: 二重引用符を使用した MySQL テーブル名 次のような mysql クエリを実行しています: Select*from "User"; 返されます: SQL 構文にエラーがあります; 1 行目の "...

から 2023-10-24 22:39:00

0

1

301

関連トピック

詳細>

• エクセルで並べ替える方法
• 鉄道12306の待機券の当選率は高いでしょうか？
• 仮想通貨取引にはどのプラットフォームが適していますか?
• ネットワークケーブルが抜けている
• Windows 11の起動後にインターネットへの接続をスキップする方法
• コンピューターのCドライブがいっぱいになったときにクリーンアップする方法
• 統計分析
• ダイナミック リンク ライブラリでプログラム入力ポイントが見つかりません

人気のおすすめ

• jsはどういう意味ですか
• jsで文字列を配列に変換するにはどうすればよいですか?
• JavaScriptを使用してページを更新する方法
• js配列内の項目を削除する方法
• sqrt関数の使い方

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1403344
• 
  PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

  4231577
• 
  JAVA 初心者向けビデオチュートリアル

  2419451
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  498313
• 
  PHP ゼロベースの入門チュートリアル

  834143

• 
  最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)

  1403344 回の学習
• 
  JAVA 初心者向けビデオチュートリアル

  2419451 回の学習
• 
  Little Turtle のゼロベースの Python 学習入門ビデオ チュートリアル

  498313 回の学習
• 
  Web フロントエンド開発の簡単な紹介

  214198 回の学習
• 
  PSビデオチュートリアルをゼロからマスターする

  859128 回の学習

• 
  [Web フロントエンド] Node.js クイック スタート

  4689 回の学習
• 
  海外のWeb開発フルスタックコースの完全なコレクション

  3632 回の学習
• 
  Go言語実践GraphQL

  3121 回の学習
• 
  550W ファンマスターが JavaScript をゼロから段階的に学習します

  561 回の学習
• 
  Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

  16129 回の学習

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

• [フォームボタン] jQuery エンタープライズ メッセージ フォームの連絡先コード
• [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果
• [メニューナビゲーション] HTML5 クールなパーティクル アニメーション ナビゲーション メニューの特殊効果
• [フォームボタン] jQuery ビジュアル フォームのドラッグ アンド ドロップ編集コード
• [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤー コード
• [html5特殊効果] 古典的な HTML5 プッシュ ボックス ゲーム
• [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール
• [フォトアルバム効果] CSS3 個人アルバム カバー ホバー ズーム効果

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

• [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)
• [PNG素材] 4 つの赤い 2023 卒業バッジ ベクター素材 (AI+EPS+PNG)
• [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）
• [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）
• [PNG素材] 黒と白のスタイルの山アイコン ベクター素材 (EPS+PNG)
• [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）
• [バナー画像] フラット スタイルの植樹祭バナー ベクター素材 (AI+EPS)
• [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

• [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート
• [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート
• [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート
• [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート
• [フロントエンドテンプレート] オンライン電子書籍ストア モールのウェブサイト テンプレート
• [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイト テンプレートを解決します
• [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて 免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！