Build Select Option List DropDown Generator with HTML Source Code in Javascript Full Tutorial For Beginners
By
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>
Screenshot
