How to add new option to select option box using jQuery-JS Tutorial-php.cn

How to add new option to select option box using jQuery

coldplay.xixi

Release： 2020-11-30 15:01:20

Original

3344 people have browsed it

How to use jQuery to add new options to the select option box: 1. Add the options tag to the select element; 2. Use the [Option()] method to create a new option; 3. Create using value and text Create a new option element.

How to add new option to select option box using jQuery

The operating environment of this tutorial: Windows 7 system, jquery version 3.3.1. This method is suitable for all brands of computers.

Related recommendations: "jQuery Video Tutorial"

How to use jQuery to add new options to the select option box:

Method 1: Add the options tag to the select element

First use the jquery selector to select the select element, and then use the append() method to add the options tag element. The append() method inserts the specified content into the last subcollection of the jQuery collection. This way the options element is added to the select element.

Syntax:

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

Copy after login

Example:

<!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>

Copy after login

Rendering:

How to add new option to select option box using jQuery

Method 2: Use Option () method creates new options

#Option() method is used to create new option elements. This method will create a new option using text and the value of the option as arguments. Then use the append() method to add this option element to the selection box.

Syntax:

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

Copy after login

Example:

<!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>

Copy after login

Rendering:

How to add new option to select option box using jQuery

Method 3: Using values and text creation creates a new option element

Creates a new jQuery DOM element using the option tag. The value of the option tag is set using the val() method, and the text of the option tag is set using the text() method. Then use the append() method to add the created option element to the selection box.

Grammar:

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

Copy after login

Example:

<!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>

Copy after login

Rendering:

How to add new option to select option box using jQuery

For more programming-related knowledge, please visit : Programming learning! !

The above is the detailed content of How to add new option to select option box using jQuery. For more information, please follow other related articles on the PHP Chinese website!