Как установить значение параметра динамически с помощью 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 и годы в раскрывающемся списке приходит пользователь properly.When щелкает на кнопке + генерируется еще один набор из 3 полей, и в этом разделе пользователь не получает ни одного года в раскрывающемся списке. Пожалуйста, помогите мне динамически добавлять годы в выпадающем списке, который наступает после нажатия на кнопку +.Пожалуйста, помогите мне.

Answer 1

Мы внедрили код для вас. Идентификатор для элемента уникален, и для этого мы создали динамический счетчик 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 
       })); 
      } 

     } 

КОДА ПОСЛЕ 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>