Oh Snap!

Please turnoff your ad blocking mode for viewing your site content

Hit enter after type your search item

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

/
/
/
204 Views

 

 

 

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>

 

READ  Build a Voice Notepad Using Native File System API & Web Speech API in Javascript Full Project For Beginners

 

Screenshot

 

 

 

 

 

 

Leave a Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Coding Shiksha 2020. All Rights Reserved.
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :