如何使用jquery / javascript动态设置选项值

Question

我想使用Jquery / Javascript动态设置选项值。我正在用下面的代码解释我的工作流程。

  

的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>

在上面的代码中，第一次在页面加载后用户获得3个字段i.e-Qualification,College,Passing year fields并且下拉列表中的年份正常。当用户再次点击+按钮时，另一组3字段正在生成，在此部分，用户没有在下拉列表中获得任何年份。请帮助我在点击+按钮后的下拉列表中动态添加年份。请帮助我。

Answer 1

我们已经为您实施了代码。元素的ID是唯一的，为此我们创建了一个动态ID计数器。每当您添加文本框时，它都会分配新ID以选择下拉列表并为其指定年份选项。

<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>

Answer 2

你可以试试这段代码

     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
                }));
            }

        }

编辑后的代码**

        <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>