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

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

javascript jquery html

如何使用jquery/javascript动态设置选项值,javascript,jquery,html,Javascript,Jquery,Html,我想使用Jquery/Javascript动态设置选项值 index.html： *资格 *学院 *过去的一年年 + - window.onload=function（）{ getYears（）； } 函数getYears（）{ var dropdown=document.getElementById（“txtPassingYear”）； var currentTime=新日期（）； var year=currentTime.getFullYear（）；对于（var i=年份；i>=1

我想使用Jquery/Javascript动态设置选项值

index.html：



*资格
*学院
*过去的一年
年
+
-

window.onload=function（）{
getYears（）；
}
函数getYears（）{
var dropdown=document.getElementById（“txtPassingYear”）；
var currentTime=新日期（）；
var year=currentTime.getFullYear（）；
对于（var i=年份；i>=1960；i--）{
var newOption=document.createElement（'option'）；
newOption.value=i；
newOption.innerHTML=i；
添加（新选项）；
}
}
函数GetDynamicTextBox（值、值1、值2）{
返回“*资格”+
'' +
'' +
'' +
“*学院”+
'' +
'' +
'' +
“*过年”+
'' +
'' +
'' +
'' +
' ' +
'+' +
'-'
}
函数AddTextBox（objId）{
var div=document.createElement（'li'）；
div.innerHTML=GetDynamicTextBox（“，”，“）；
document.getElementById（“TextBoxContainer”）.appendChild（div）；
$（objId）.css（'display'，'none'）；
$（objId）.birds（“button.btn danger”）.css（“display”，“block”）；
变量id=$（objId）.closest（'select'）；
console.log（'id is'，id）；
getYears（）；
}
函数RemoveTextBox（div）{
$（div）.最近的（“li”）.remove（）；
}

在上述代码中，在页面加载后，用户首次获得3个字段

，即e-Qualification、College、，通过年份字段

，下拉列表中的年份正确出现。当用户再次单击

按钮时，另一组3个字段正在生成，并且在本节中，用户在下拉列表中没有任何年份。请帮助我在单击

后出现的下拉列表中动态添加年份按钮。请帮助我。

您可以尝试此代码

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

        }

函数getYears（）{ 变量$dropdown=$（“#txtPassingYear”）； var currentTime=新日期（）； var year=currentTime.getFullYear（）；对于（var i=年份；i>=1960；i--）{ $dropdown.append（$（''）{ 价值观：我，正文：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>



*资格
*学院
*过去的一年
年
+
-

window.onload=函数（）{
变量$dropdown=$（“#txtPassingYear”）；
getYears（$dropdown）；
}
函数getYears（元素）{
var currentTime=新日期（）；
var year=currentTime.getFullYear（）；
对于（var i=年份；i>=1960；i--）{
元素。追加（$（“”{
价值观：我，
正文：i
}));
}
}
var-selectId=1；
函数GetDynamicTextBox（值、值1、值2）{
返回“*资格”+
'' +
'' +
'' +
“*学院”+
'' +
'' +
'' +
“*过年”+
'' +
'' +
'' +
'' +
' ' +
'+' +
'-'
}
函数AddTextBox（objId）{
var div=document.createElement（'li'）；
selectId++；
div.innerHTML=GetDynamicTextBox（“，”，“）；
document.getElementById（“TextBoxContainer”）.appendChild（div）；
$（objId）.css（'display'，'none'）；
$（objId）.birds（“button.btn danger”）.css（“display”，“block”）；
变量id=$（objId）.closest（'select'）；
console.log（'id is'，id）；
变量$dropdown=$（“#txtPassingYear”+selectId）；
getYears（$dropdown）；
}
函数RemoveTextBox（div）{
$（div）.最近的（“li”）.remove（）；
}

我们已经为您实现了代码。元素的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>



*资格
*学院
*过去的一年
年
+
-

window.onload=function（）{
getYears（）；
}
函数getYears（）{
var dropdown=document.getElementById（“txtPassingYear”）；
var currentTime=新日期（）；
var year=currentTime.getFullYear（）；
对于（var i=年份；i>=1960；i--）{
var newOption=document.createElement（'option'）；
newOption.value=i；
newOption.innerHTML=i；
添加（新选项）；
}
}
函数getYearsOther（）{
var dropdown=document.getElementById（“txtPassingYear”+计数器）；
var currentTime=新日期（）；
var year=currentTime.getFullYear（）；
对于（var i=年份；i>=1960；i--）{
var newOption=document.createElement（'option'）；
newOption.value=i；
newOption.innerHTML=i；
添加（新选项）；
}
}
var计数器=0；
函数GetDynamicTextBox（值、值1、值2）{
计数器++；
返回“*资格”+
'' +
'' +
'' +
“*学院”+
'' +
'' +
'' +
“*过年”+
'' +
'' +
'' +
'' +
' ' +
'+' +
<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>