Build Select Option List DropDown Generator with HTML Source Code in Javascript Full Tutorial For Beginners

Build Select Option List DropDown Generator with HTML Source Code in Javascript Full Tutorial For Beginners

 

 

 

Welcome folks today in this post we will be building a select option list dropdown generator in javascript. We will be generating html source code. All the source code of the application is given below.

 

 

Get Started

 

 

 

In order to get started we need to make a index.html file and copy paste the following code

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>Select Option List DropDown Generator</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
  </head>
  <body>
      <div class="container">
      <h1 class="text-center">Select Option DropDown List Generator</h1>
      <form id="form">
          <div class="form-group">
              <label for="options">Options (One Per Line)</label>
              <textarea name="" class="form-control" id="options" cols="30" rows="10" required placeholder="Enter Options"></textarea>
          </div>
          <div class="form-group">
              <button class="btn btn-danger btn-block">
                  Generate Select List
              </button>
          </div>           
      </form>
      <div id="preview"></div>
          <h2 class="text-center">Source Code</h2>
          <div class="form-group">
          <label for="output">Output HTML:</label>
          <textarea class="form-control" rows="10" cols="30" id="result" placeholder="Output HTML Code"></textarea>
          </div> 
    </div>
</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
      var result=``

      $("#form").submit(function(e){
          e.preventDefault()

          var options = $('#options').val().split('\n');

          result+= `
          <div class="form-group">
  <label for="sel1">Select list:</label>
  <select class="form-control" id="sel1">
          `

          options.forEach(option => {
             result+= `<option>${option}</option>` 
          });

          result+=`
          </select>
          </div>
          `

          $("#preview").html(result)

          $("#result").val(format(result.trim()))



      })
      function format(html) {
    var tab = '\t';
    var result = '';
    var indent= '';

    html.split(/>\s*</).forEach(function(element) {
        if (element.match( /^\/\w/ )) {
            indent = indent.substring(tab.length);
        }

        result += indent + '<' + element + '>\r\n';

        if (element.match( /^<?\w[^>]*[^\/]$/ ) && !element.startsWith("input")  ) { 
            indent += tab;              
        }
    });

    return result.substring(1, result.length-3);
}
  </script>
</html>

 

See also  Join 100+ Programming and Coding Whatsapp Group Invite Links For Web Developers in 2021 | 100 Whatsapp Groups For Programmers and Coders

 

Screenshot

 

 

 

 

 

 

Leave a Reply