So fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu-js-Tutorial-php.cn

So fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu

coldplay.xixi

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

Original

3342 Leute haben es durchsucht

So verwenden Sie jQuery, um dem Auswahloptionsfeld neue Optionen hinzuzufügen: 1. Fügen Sie das Options-Tag zum Auswahlelement hinzu. 2. Verwenden Sie die Methode [Option()], um eine neue Option zu erstellen Wert und Textelement.

So fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JQuery-Version 3.3.1. Diese Methode ist für alle Computermarken geeignet.

Verwandte Empfehlungen: „jQuery-Video-Tutorial“

So verwenden Sie jQuery, um dem Auswahloptionsfeld neue Optionen hinzuzufügen:

Methode 1: Fügen Sie das Options-Tag zum Auswahlelement hinzu

Verwenden Sie jQuery, um Zuerst auswählen Der Selektor wählt das ausgewählte Element aus und verwendet dann die Methode append(), um das Options-Tag-Element hinzuzufügen. Die Methode append() fügt den angegebenen Inhalt in die letzte Untersammlung der jQuery-Sammlung ein. Auf diese Weise wird das Optionselement zum Select-Element hinzugefügt.

Syntax:

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

Nach dem Login kopieren

Beispiel:

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

Nach dem Login kopieren

Rendering:

So fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu

Methode 2: Verwenden Sie die Option()-Methode, um neue Optionen zu erstellen

Die Option()-Methode wird verwendet um ein neues Optionselement zu erstellen. Diese Methode erstellt eine neue Option unter Verwendung von Text und dem Wert der Option als Argumente. Verwenden Sie dann die Methode append(), um dieses Optionselement zum Auswahlfeld hinzuzufügen. Option()方法用于创建新的option元素。该方法将使用文本和选项的值作为参数创建一个新选项。然后使用append()方法将此option元素添加到选择框中。

语法：

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

Nach dem Login kopieren

示例：

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

Nach dem Login kopieren

效果图：

So fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu

方法3：使用值和文本创建创建新的option元素

使用option标签创建一个新的jQuery DOM元素。option标签的值是用val()

Syntax:

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

Nach dem Login kopieren

Beispiel:

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

Nach dem Login kopieren

Rendering:

So fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu

Methode 3: Erstellen Sie ein neues Optionselement mithilfe der Wert- und Texterstellung.

Erstellen Sie ein neues jQuery DOM-Element mithilfe des Option-Tags. Der Wert des Options-Tags wird mit der Methode val() festgelegt, und der Text des Options-Tags wird mit der Methode text() festgelegt. Verwenden Sie dann die Methode append(), um das erstellte Optionselement zum Auswahlfeld hinzuzufügen.

🎜 Grammatik: 🎜rrreee🎜 Beispiel: 🎜rrreee🎜 Darstellung: 🎜🎜🎜🎜🎜Weitere programmbezogene Kenntnisse finden Sie unter: 🎜Programmieren lernen🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie mithilfe von jQuery eine neue Option zur Auswahl des Optionsfelds hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!