このチュートリアルでは、JavaScript を使用して入力テキストから select タグにオプションを追加する手順を定義します。
JavaScript を使用して入力テキストからタグを選択するオプションを追加する方法は?
JavaScript を使用して入力テキストから選択タグにオプションを追加するには、次のようなさまざまな方法を使用できます。
それぞれの方法を1つずつ見ていきましょう！
方法 1: オプション コンストラクターで add() メソッドを使用して、入力テキストからタグを選択するオプションを追加する
select タグの入力テキストからオプションを追加するには、「 追加（） ”メソッド” オプション コンストラクタ。 add() メソッドを使用して、「 HTMLSelectElement 」は
構文
指定された構文に従って add() メソッドを使用し、select タグにオプションを追加します。
追加 ( オプション、既存のオプション ) ;ここで、「 オプション 」は、「」の代わりに追加される新しいオプションを表します。 既存のオプション 」。
例
を使用して入力フィールド、ドロップダウン メニューを作成します。 <選択> タグと、select 要素に新しいオプションを追加するボタン。 挿入オプション() 」をクリックしたときの機能：
< 入力方式 = '文章' ID = 'TXT' プレースホルダー = 「オプションを追加するテキストを入力してください」 >< IDを選択 = 「オプション」 >
< オプション値 = 'c' > C オプション >
選択する >
< br >< br >
< ボタン ID = 「追加ボタン」 オンクリック = 「挿入オプション()」 > オプションを追加 ボタン >
JS ファイルで、「」という名前の関数を定義します。 挿入オプション() 」を使用して、割り当てられたIDでボタン、テキストボックス、および選択要素にアクセスします querySelector() ' 方法。次に、Option コンストラクターを使用してオプションのインスタンスを作成し、既存のオプションと、リストの最後に追加する必要がある新しいオプションを渡して add() メソッドを呼び出します。
関数挿入オプション ( ){
定数 addBtn = 資料。 クエリセレクター ( '#addbtn' ) ;
定数 リストボックス = 資料。 クエリセレクター ( '#オプション' ) ;
定数 落ちる = 資料。 クエリセレクター ( '＃TXT' ) ;
定数 オプション = 新着 オプション ( 落ちる。 価値 、 落ちる。 価値 ) ;
リストボックス。 追加 ( オプション、未定義 ) ;
落ちる。 価値 = '' ;
落ちる。 集中 ( ) ;
}
出力は、テキスト フィールドの新しいオプションがドロップダウン メニューの最後に追加されたことを示しています。
ノート： このメソッドを使用して、既存のオプションの値を undefined の代わりに 2 番目のパラメーターとして追加することにより、select タグの先頭にオプションを追加できます。既存のオプションの前に新しいオプションを追加します。
別の方法に移りましょう！
方法 2: createElement() と appendChild() メソッドを使用して、入力テキストからタグを選択するオプションを追加する
「を使用して新しい要素を作成できる別のアプローチがあります。 createElement() ” を使用したメソッド appendChild() ' 方法。この方法を使用して、select タグの先頭にオプションを追加します。
構文
次の構文を使用して、appendChild() メソッドを使用して入力テキストから select タグにオプションを追加します。
appendChild ( 新しいオプション値 ) ;例
ここでは、2 つのオプションを追加してドロップダウン リストを作成します。 C ' と ' C++ 」、入力フィールド、および「」という名前のユーザー定義 JavaScript 関数を呼び出すボタン 挿入オプション() 」 onclick イベントがトリガーされたとき:
< 入力方式 = '文章' ID = 'TXT' プレースホルダー = 「オプションを追加するテキストを入力してください」 >< IDを選択 = '落ちる' >
< オプション > C オプション >
< オプション > C ++ オプション >
選択する >
< br >< br >
< ボタンオンクリック = 'insertOption();' > オプションを追加 ボタン >
「」という名前の関数で 挿入オプション() 」、最初に割り当てられた ID を使用して select 要素とテキスト フィールドにアクセスし、次に createElement() メソッドと createTextNode() メソッドを呼び出してオプション インスタンスを作成し、テキスト値をオプションとしてフェッチします。その後、appendChild() メソッドを呼び出してテキスト値をオプションとして渡し、このオプションを選択リストの先頭に追加します。 insertBefore() 」 select 要素を使用したメソッド:
関数挿入オプション ( ){
変数選択 = 資料。 getElementById ( '落ちる' ) 、
テキスト値 = 資料。 getElementById ( 'TXT' ) . 価値 、
新しいオプション = 資料。 createElement ( 'オプション' ) 、
新しいオプション値 = 資料。 createTextNode ( テキスト値 ) ;
新しいオプション。 appendChild ( 新しいオプション値 ) ;
選択する。 前に挿入 ( 新しいオプション、選択します。 第一子 ) ;
}
出力を見るとわかるように、テキスト フィールドの新しいオプションがドロップダウン メニューの先頭に追加されています。
入力テキストから選択タグにオプションを追加するためのすべての可能なソリューションをまとめました。
結論
JavaScript を使用して入力テキストから select タグにオプションを追加するには、add() メソッドや appendChild() メソッドなどの JavaScript 組み込みメソッドを使用できます。リストの先頭と末尾の select タグにオプションを追加できます。このチュートリアルでは、入力テキストから select タグにオプションを追加する手順を JavaScript を使用して詳細な例とともに定義しました。