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

Home

Web Front-end

JS Tutorial

How to add new option to select option box using jQuery

coldplay.xixi

Nov 25, 2020 am 10:25 AM

jqueryselect

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}`)

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何使用jQuery向select元素中添加options？</title>
    </head>
    <body> 
    <h2 id="nbsp-使用jQuery向select元素中添加options"> 使用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>

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

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何使用jQuery向select元素中添加options？</title>
    </head>
    <body> 
    <h2 id="nbsp-使用jQuery向select元素中添加options"> 使用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>

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

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>如何使用jQuery向select元素中添加options？</title>
    </head>
    <body> 
    <h2 id="nbsp-使用jQuery向select元素中添加options"> 使用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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn