How to set option value dynamically using jquery/javascript

Question

I want to set option value dynamically using Jquery/Javascript.I am explaining my work flow with code below.

index.html:

<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
 <li>
 <div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
 </div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
 <label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
                                                            <option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C">&nbsp;</label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>

<script type="text/javascript">
 window.onload=function(){
    getYears();
 }
 function getYears() {
        var dropdown = document.getElementById("txtPassingYear");
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        for (var i = year; i >= 1960; i--) {
            var newOption = document.createElement('option');
            newOption.value = i;
            newOption.innerHTML = i;
            dropdown.add(newOption);
        }
    }
</script>
<script type="text/javascript">
    function GetDynamicTextBox(value, value1, value2) {
        return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
                '<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
                '</div>' +
                '<div class="col-md-5 bmargindiv1">' +
                    '<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
                    '<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
                '</div>' +
                '<div class="col-md-2 bmargindiv1">' +
                    '<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
                    '<select ID="txtPassingYear" name="passingyear">' +

                    '</select>' +
                '</div>' +
                '<div class="col-md-1 bmargindiv1">' +
                    '<label for="action" accesskey="C">&nbsp;</label>' +
                '<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
                '<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
    }
    function AddTextBox(objId) {

        var div = document.createElement('li');
        div.innerHTML = GetDynamicTextBox("", "", "");
        document.getElementById("TextBoxContainer").appendChild(div);
        $(objId).css('display', 'none');
        $(objId).siblings("button.btn-danger").css('display', 'block');
        var id=$(objId).closest('select');
        console.log('id is',id);
        getYears();
    }

    function RemoveTextBox(div) {
        $(div).closest("li").remove();
    }
    </script>

In this above code first time after page load user is getting 3 fields i.e-Qualification,College,Passing year fields and the the years in drop down list is coming properly.When user is clicking on + button again another set of 3 fields is generating and in this section user is not getting any year in drop down list.Please help me to add years dynamically in dropdown list which is coming after clicked on + button.Please help me.

as i see this is an example of invalid markup. because of ol elements child should only be li. and instead of dropdown.add(newOption); you can use dropdown.appendChild(newOption); — Jai
– Jai, Commented Jul 30, 2015 at 12:19
My issue is when 2nd set of field are created,the drop down list should contain all values. — satya
– satya, Commented Jul 30, 2015 at 12:22
you have a same id for other select too. so when this happens, browser stops the element lookup when it finds a specific id in the page. this is how it works. so the solution is to change the id to class and change all the selectors to .getElementByClassName(). — Jai
– Jai, Commented Jul 30, 2015 at 12:33
if you want to use jQuery then most probably you want to look at .clone() method. — Jai
– Jai, Commented Jul 30, 2015 at 12:37

Solutionswithus · Accepted Answer · 2015-07-30 12:34:44Z

We have implemented the code for you. Id for the element is unique and for this we have created a dynamic id counter. Whenever you add the textboxes it will assign new id to select drop down and assign the year option to it.

<Ol>
<div class="totalaligndiv" id="TextBoxContainer">
 <li>
 <div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
 </div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
 <label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
                                                            <option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C">&nbsp;</label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>

<script type="text/javascript">
 window.onload=function(){
    getYears();
 }
 function getYears() {
        var dropdown = document.getElementById("txtPassingYear");
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        for (var i = year; i >= 1960; i--) {
            var newOption = document.createElement('option');
            newOption.value = i;
            newOption.innerHTML = i;
            dropdown.add(newOption);
        }
    }

    function getYearsOther() {
        var dropdown = document.getElementById("txtPassingYear" + counter);
        var currentTime = new Date();
        var year = currentTime.getFullYear();
        for (var i = year; i >= 1960; i--) {
            var newOption = document.createElement('option');
            newOption.value = i;
            newOption.innerHTML = i;
            dropdown.add(newOption);
        }
    }
</script>
<script type="text/javascript">
    var counter = 0;
    function GetDynamicTextBox(value, value1, value2) {
        counter++;
        return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
                '<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
                '</div>' +
                '<div class="col-md-5 bmargindiv1">' +
                    '<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
                    '<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
                '</div>' +
                '<div class="col-md-2 bmargindiv1">' +
                    '<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
                    '<select ID="txtPassingYear' + counter + '" name="passingyear">' +

                    '</select>' +
                '</div>' +
                '<div class="col-md-1 bmargindiv1">' +
                    '<label for="action" accesskey="C">&nbsp;</label>' +
                '<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
                '<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
    }
    function AddTextBox(objId) {

        var div = document.createElement('li');
        div.innerHTML = GetDynamicTextBox("", "", "");
        document.getElementById("TextBoxContainer").appendChild(div);
        $(objId).css('display', 'none');
        $(objId).siblings("button.btn-danger").css('display', 'block');
        var id=$(objId).closest('select');
        console.log('id is',id);
        getYearsOther();
    }

    function RemoveTextBox(div) {
        $(div).closest("li").remove();
    }
    </script>

GH_ · Accepted Answer · 2015-07-30 12:55:14Z

You could try this code

     function getYears() {
            var $dropdown =$('#txtPassingYear');
            var currentTime = new Date();
            var year = currentTime.getFullYear();
            for (var i = year; i >= 1960; i--) {
                $dropdown.append($('<option>', {
                    value: i,
                    text: i
                }));
            }

        }

CODE AFTER EDIT**

        <Ol>
<div class="totalaligndiv" id="TextBoxContainer">
 <li>
 <div class="col-md-4 bmargindiv1">
<label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>
<input name = "txtQualification" id="txtQualification" type="text" />
 </div>
<div class="col-md-5 bmargindiv1">
<label for="college" accesskey="C"><span class="required">*</span> College</label>
<input type="text" ID="txtCollege" name="college"/>
</div>
<div class="col-md-2 bmargindiv1">
 <label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>
<select ID="txtPassingYear" name="passingyear">
                                                            <option>Year</option>
</select>
</div>
<div class="col-md-1 bmargindiv1">
<label for="action" accesskey="C">&nbsp;</label>
<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>
<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>
</div>
</li>
</div>
</Ol>

<script type="text/javascript">
    window.onload = function () {
        var $dropdown = $('#txtPassingYear');
        getYears($dropdown);
    }
    function getYears(element) {

        var currentTime = new Date();
        var year = currentTime.getFullYear();
        for (var i = year; i >= 1960; i--) {
            element.append($('<option>', {
                value: i,
                text: i
            }));
        }

    }
</script>
<script type="text/javascript">
    var selectId=1;
    function GetDynamicTextBox(value, value1, value2) {
        return '<div class="col-md-4 bmargindiv1"><label for="qualification" accesskey="Q"><span class="required">*</span> Qualification</label>' +
                '<input name = "txtQualification" id="txtQualification" type="text" value = "' + value + '" />' +
                '</div>' +
                '<div class="col-md-5 bmargindiv1">' +
                    '<label for="college" accesskey="C"><span class="required">*</span> College</label>' +
                    '<input type="text" ID="txtCollege" name="college" value = "' + value1 + '" />' +
                '</div>' +
                '<div class="col-md-2 bmargindiv1">' +
                    '<label for="passingyear" accesskey="Q"><span class="required">*</span> Passing Year</label>' +
                    '<select ID="txtPassingYear' + selectId + '" name="passingyear">' +

                    '</select>' +
                '</div>' +
                '<div class="col-md-1 bmargindiv1">' +
                    '<label for="action" accesskey="C">&nbsp;</label>' +
                '<button type="button" class="btn btn-success btn-sm addbtn" id="Button1" onclick="AddTextBox(this)">+</button>' +
                '<button type="button" class="btn btn-danger btn-sm minusbtn " id="Button2" style="display:none;" onclick = "RemoveTextBox(this)">-</button>'
    }
    function AddTextBox(objId) {
        var div = document.createElement('li');
        selectId++;
        div.innerHTML = GetDynamicTextBox("", "", "");
        document.getElementById("TextBoxContainer").appendChild(div);
        $(objId).css('display', 'none');
        $(objId).siblings("button.btn-danger").css('display', 'block');
        var id = $(objId).closest('select');
        console.log('id is', id);
        var $dropdown = $('#txtPassingYear' + selectId);
        getYears($dropdown);
    }

    function RemoveTextBox(div) {
        $(div).closest("li").remove();
    }
    </script>

My getYears function is also working fine but my issue was when 2nd set of drop down field is creating after click on + button the years also should come there.
You see, that's because the new select has the same id which is txtrPassingYear.

Collectives™ on Stack Overflow

How to set option value dynamically using jquery/javascript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related