jQueryを使用してオプションボックスを選択する新しいオプションを追加する方法-jsチュートリアル-php.cn

jQueryを使用してオプションボックスを選択する新しいオプションを追加する方法

coldplay.xixi

リリース： 2020-11-30 15:01:20

オリジナル

3348 人が閲覧しました

jQuery を使用して選択オプションボックスに新しいオプションを追加する方法: 1. オプションタグを選択要素に追加します; 2. [Option()] メソッドを使用して新しいオプションを作成します; 3. を作成します値とテキストを使用して、新しいオプション要素を作成します。

jQueryを使用してオプションボックスを選択する新しいオプションを追加する方法

このチュートリアルの動作環境: Windows 7 システム、jquery バージョン 3.3.1. この方法は、すべてのブランドのコンピューターに適しています。

関連する推奨事項: 「jQuery ビデオチュートリアル」

jQuery を使用してオプション選択ボックスに新しいオプションを追加する方法:

方法 1: options タグを select 要素に追加します

最初に jquery セレクターを使用して select 要素を選択し、次に append() メソッドを使用して options タグ要素を追加します。 append() メソッドは、指定されたコンテンツを jQuery コレクションの最後のサブコレクションに挿入します。このようにして、options 要素が select 要素に追加されます。

構文:

$(&#39;#selectBox&#39;).append(`${optionText}`)

ログイン後にコピー

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何使用jQuery向select元素中添加options？</title>
    </head>
    <body> 
    <h2 style="color: green"> 使用jQuery向select元素中添加options</h2> 
    <p> 
                    从给定选项中选择一个： 
        <select id="select"> 
            <option value="free">Free</option> 
            <option value="basic">Basic</option> 
        </select> 
    </p> 
    <p>单击下面的按钮，向选择框添加一个选项。</p> 
    <button onclick="addOption()">添加option</button> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    <script type="text/javascript"> 
        function addOption() { 
            optionText = &#39;Premium&#39;; 
            optionValue = &#39;premium&#39;; 
            $(&#39;#select&#39;).append(`<option value="${optionValue}"> ${optionText} </option>`); 
        } 
    </script> 
</body> 
</html>

ログイン後にコピー

レンダリング:

jQueryを使用してオプションボックスを選択する新しいオプションを追加する方法

方法 2: オプション ( ) メソッドは新しいオプションを作成します

#Option() メソッドは、新しいオプション要素を作成するために使用されます。このメソッドは、テキストとオプションの値を引数として使用して、新しいオプションを作成します。次に、append() メソッドを使用して、このオプション要素を選択ボックスに追加します。

構文:

$(&#39;#selectBox&#39;).append(new Option(optionText, optionValue))

ログイン後にコピー

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何使用jQuery向select元素中添加options？</title>
    </head>
    <body> 
    <h2 style="color: red"> 使用jQuery向select元素中添加options</h2> 
    <p> 
                    从给定选项中选择一个： 
        <select id="select"> 
            <option value="hello">Hello</option> 
            <option value="hi">Hi</option> 
        </select> 
    </p> 
    <p>单击下面的按钮，向选择框添加一个选项。</p> 
    <button onclick="addOption()">添加option</button> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    <script type="text/javascript"> 
        function addOption() { 
            optionText = &#39;welcome&#39;; 
            optionValue = &#39;welcome&#39;; 
            $(&#39;#select&#39;).append(new Option(optionText, optionValue)); 
        } 
    </script> 
</body> 
</html>

ログイン後にコピー

レンダリング:

jQueryを使用してオプションボックスを選択する新しいオプションを追加する方法

方法 3: 値とテキストの作成により、新しいオプション要素が作成されます。

オプションタグを使用して、新しい jQuery DOM 要素が作成されます。オプションタグの値は val() メソッドを使用して設定され、オプションタグのテキストは text() メソッドを使用して設定されます。次に、append() メソッドを使用して、作成したオプション要素を選択ボックスに追加します。

文法:

$(&#39;#selectBox&#39;).append($(&#39;<option>&#39;).val(optionValue).text(optionText))

ログイン後にコピー

例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何使用jQuery向select元素中添加options？</title>
    </head>
    <body> 
    <h2 style="color: green"> 使用jQuery向select元素中添加options</h2> 
    <p> 
                    从给定选项中选择一个： 
        <select id="select"> 
            <option value="free">Free</option> 
            <option value="basic">Basic</option> 
        </select> 
    </p> 
    <p>单击下面的按钮，向选择框添加一个选项。</p> 
    <button onclick="addOption()">添加option</button> 
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
    <script type="text/javascript"> 
        function addOption() { 
            optionText = &#39;Extra&#39;; 
            optionValue = &#39;extra&#39;; 
            $(&#39;#select&#39;).append($(&#39;<option>&#39;).val(optionValue).text(optionText)); 
        } 
    </script> 
</body> 
</html>

ログイン後にコピー

レンダリング:

jQueryを使用してオプションボックスを選択する新しいオプションを追加する方法