javascript - 选择时如何将下拉列表的值加载到文本框中

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>

标签： javascripthtml

Answer 1

您可以使用 jquery 的 .val() 函数获取 Select 下拉列表 (#selseriessetupid) 的值，并尝试将其设置为 #employeenumber 值。

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