◀ 15.

jQueryを使用してセレクトボックスにオプションを追加する方法

編集

jQueryを使用してセレクトボックスにオプションを追加する方法

jQueryはJavaScriptライブラリの1つであり、HTML要素を簡単に操作できるようにします。セレクトボックスにオプションを追加する方法は、以下の手順で行うことができます。

ステップ1: セレクトボックスをHTMLで作成する

最初に、セレクトボックスをHTMLで作成する必要があります。以下は例です。

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

ここで、id属性が"mySelect"に設定されていることに注意してください。これは、jQueryでセレクトボックスを特定するために使用されます。

ステップ2: jQueryを使用してオプションを追加する

次に、jQueryを使用して新しいオプションを追加することができます。以下は例です。

$("#mySelect").append("<option value='option4'>Option 4</option>");

この例では、新しいオプションが"Option 4"で、値が"option4"であることに注意してください。このオプションは、セレクトボックスに追加されます。

また、この例では、jQueryのappend()メソッドを使用して新しいオプションを既存のセレクトボックスに追加しています。

以下は、セレクトボックスに新しいオプションを追加する完全な例です。

<!DOCTYPE html>

<html>
<head>
  <title>jQuery Example - Add Option to Select Box</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

  <select id="mySelect">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </select>

  <button id="addOptionBtn">Add Option</button>

  <script>
    $(document).ready(function() {
      $("#addOptionBtn").click(function() {
        $("#mySelect").append("<option value='option4'>Option 4</option>");
      });
    });
  </script>

</body>
</html>

ここでは、jQueryのclick()メソッドを使用して、ボタンがクリックされたときに新しいオプションが追加されるようにしています。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 導入方法
  2. 文法
  3. HTML/CSS操作・制御
  4. 要素の取得
  5. 値の取得
  6. 値と要素の追加
  7. 値と要素の削除
  8. 子要素の削除
  9. 要素のコピー
  10. Ajax
  11. 項目をタッチ/クリックしてスライドさせる方法
  12. テキスト/セレクトボックス/ラジオボタン変更時のイベント
  13. パスワードを一時的に表示させる方法
  14. $(document).ready(function() { ...
  15. セレクトボックスにオプションを追加する方法
2023-04-17 11:16:24 ぼうず 54

人気ページ

最近更新/作成されたページ