All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

jQuery Add Select Option Dynamically

Last Updated : Mar 11, 2024

jQuery Add Select Option Dynamically

In this article we will show you the solution of jQuery add select option dynamically and we will learn about process of adding option to the existing select button options.

To achieve the result two main things helps majorly such as append() method and dynamic input.

The append() method helps you to attach providing option with the default option of select button when you click on proceed button.

To collect inputs dynamically you need input box then you have to pass user input to add() method.

Step By Step Guide On jQuery Add Select Option Dynamically :-

In this program, we defined input element to ask input from user each time.

You can change this value whenever you want it and you can also set one default value.

If you set default value everyone get same result. Then select element defined with two options 'HTML, C++' below that button 'Add Option' created.

When you click it, then only every process start their work and give you correct output.

<!DOCTYPE html>
<html>
<head>
<title>
      Add one option dynamically
</title>
</head>
<body>
<input type="text" id="in" placeholder="Enter Option Value">
<p>
        Select:
<select id="s1">
<option value="HTML">HTML</option>
<option value="C++">C++</option>
</select>
</p>
<button onclick="add()">
      Add option
</button>
<h1></h1>
<script src= "https://code.jquery.com/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
        function add() {
            optTt = $('#in').val();
            optVl = $('#in').val();
            $('#s1').append(`<option value="${optVl}">
                                       ${optTt} </option>`);
            $('h1').text("Option Added...");
        }
</script>
</body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. First we defined input tag with id, placeholder attributes. To throw clarity for user, what input you are asking them.
  7. Select element created with id attribute 's1', which contains two options 'HTML, C++'. Then button 'Add Option' created with onclick() event to declare method 'add()' when user click on it given method will load() their definition.
  8. Within script tage we provide definition for 'add()' method. There we declared two variables 'optTt, optVl' to append user input at newly creation of option tag.
  9. Finally it will insert to the select element at the last option through append() we can add any html elements dynamically to the body of webpage.
  10. To indicate user we inserting text 'Option Added...' with the h1 tag at the last line.
  11. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion we are able to know how to set option to the select element with the help of jquery.

When we execute this program on webpage of browser you can see text box for collect user input, select box with two options, and button 'Add Option'.

First end user need to enter option name to the input box then click on button.

After check out whether given input added with select options. Otherwise you cannot add successfully.

I hope this article on jQuery add select option dynamically helps you and the steps and method mentioned above are easy to follow and implement.