javascript - 如何使用 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>