選中時如何將下拉列表的值加載到文本框

Question

我正在處理一個前端項目，並有一組下拉列表可供選擇。 我的要求是當我選擇一個特定的下拉名稱時，它的相應值必須加載到下一個文本框中。

這是我試過的代碼。

 $('#selseriessetupid').change(function(){ var employeenumber = $(':selected',this).data('lastused'); $('.form-control').val(employeenumber); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3 uiblock"> <div class="form-group uicontrol editControl" data-displaytype="dropdownlist" data-fieldname="seriessetupid" data-templateitemid="8875"> <label class="clsCaption">Employee Number</label> <select class="form-control" name="seriessetupid" id="selseriessetupid"> <option value="0">Please select Status</option> <option data-lastused="01" value="126">FIN1</option> <option data-lastused="01" value="124">FIN</option> <option data-lastused="01" value="125">CRM</option></select></div> </div> <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3 uiblock"> <div class="form-group uicontrol editControl" data-displaytype="textbox" data-fieldname="employeenumber" data-templateitemid="8796"> <label class="clsCaption">Employee ID</label> <input type="text" placeholder="Employee ID" class="form-control " name="employeenumber" id="employeenumber"> </div> </div> </div>

Answer 1

您可以使用 jquery 的 .val() 函數獲取 Select 下拉列表 (#selseriessetupid) 的值，並嘗試將其設置在 #employeenumber 值中。

$(document).ready(function() {$('#selseriessetupid').change(function(){
        $('#employeenumber').val($('#selseriessetupid').val());
        });
      });

Answer 2

您必須使用 Jquery 的 next() 方法。 試試這個

 $('#selseriessetupid').change(function(){
          var employeenumber =  $(':selected',this).data('lastused'); 
        $(this).next('.form-control').val(employeenumber);
 });

注意它不會在所有情況下都有效，因為您使用的是 ID 選擇器。 將其更改為類以正常工作。