Dynamically add Dropdown and Text Box in same row Javascript

Question

<div class="row">
    <div class="col-md-3" style="padding-top: 10px">
    <class="tg-83xr"> <select id="year" name="year">

    <script>
        var myDate = new Date();
        var year = myDate.getFullYear();

        for(var i = 1900; i < year+1; i++){
            document.write('<option  value="'+i+'">'+i+'</option>');}
    </script></select>
    </div>

    <div class="col-md-3" style="padding-top: 10px">    
        <input type="text" class="form-control" id="d000" enabled size = "30">      
    </div>

    <div class="col-md-3" style="padding-top: 10px">    
    <input type="text" class="form-control" id="d001" enabled size ="30" >      
    </div>
</div>

<script>
    $(document).ready(function(){
    $("#num").click(function () {
    $('#form').append("<div class='row'><div class='col-md-3' style='padding top: 10px'><select class=tg-83xr id='year' > </select></div><div class='col-md-3' style='padding-top: 10px'>   <input type='text' class='form-control' id='d000'>    </div><div class='col-md-3' style='padding-top: 10px'><input type='text' class='form-control' id='d001'></div></div>")});});
</script>

<div id="form">
</div>

<br>
<button id="num"> ADD </button> To add another click here

Here, i am not able to add options in the dropdown list which contains a list of years(1900-2016) in the .append() function.

Script tag is not allowed inside select element; get select element id and append options to it; — itzmukeshy7
– itzmukeshy7, Commented Jun 6, 2016 at 14:18

Anoop Joshi P · Accepted Answer · 2016-06-06 13:45:52Z

1

Better don't use document.write. You can use append() method to add the options to select.

<select id="year" name="year">
  </select>
<script>
var myDate = new Date();
var year = myDate.getFullYear();

for (var i = 1900; i < year + 1; i++) {
  $("#year").append('<option  value="' + i + '">' + i + '</option>');
}
</script>

answered Jun 6, 2016 at 13:45

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohit Bhardwaj · Accepted Answer · 2016-06-06 13:47:40Z

1

var optionsString = "";

for( var i = 1900; i <= 2016; i++ ) // OR for( var i = 1900; i <= new Date().getFullYear(); i++ )
{
    optionsString += '<option value="'+i+'">'+i+'</option>';
}

 $('#form').append("<div class='row'><div class='col-md-3' style='padding top: 10px'><select class=tg-83xr id='year' >"+optionsString+"</select></div><div class='col-md-3' style='padding-top: 10px'>   <input type='text' class='form-control' id='d000'>    </div><div class='col-md-3' style='padding-top: 10px'><input type='text' class='form-control' id='d001'></div></div>")});});

answered Jun 6, 2016 at 13:47

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

Collectives™ on Stack Overflow

Dynamically add Dropdown and Text Box in same row Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related