从数据库中选择名称时如何自动填充输入字段？

Question

我有一个需要填写的表格，其中一个字段是员工姓名，我从名为 tbl_employee 的数据库表中选择了它的值，每个名称都有存储在同一个表中的代号，但是我有一个问题，因为我不知道要使用什么代码来自动填充名为代号的输入字段。以下是我的html代码

<div class="form-group">
 <label>Employee Name</label>
  <select name="employee" onchange="getEmp(this.value)" class="form-control">
    <option value="">Select Employee</option>
    <?php foreach($emps as $emp) : ?>
      <option value="<?php echo $emp["employee_id"]; ?>"><?php echo $emp["surname"] . ', ' . $emp["firstname"]; ?></option>
    <?php endforeach; ?>
  </select>
  <div class="help-block with-errors"></div>
</div>
<div class="form-group">
  <label>Code Name</label>
  <input class="form-control" name="codenamer" type="text"/>
  <div class="help-block with-errors"></div>
</div>

非常感谢您的回复

Answer 1

要给输入一个值，你可以给它添加“value”属性：

<input class="form-control" name="codenamer" type="text" value="<?php echo $emp["codename"]; ?>" />

Answer 2

你可以在这里使用 jQuery：

第一个在option 值中的所有pass codename 列：

<select name="employee" onchange="getEmp(this.value)" class="form-control">
    <option value="">Select Employee</option>
    <?php foreach($emps as $emp) : ?>
    <option value="<?php echo $emp["codename "]; ?>"> // use codename column in value here.
        <?php echo $emp["surname"] . ', ' . $emp["firstname"]; ?>
    </option>
    <?php endforeach; ?>
</select>

第二，在你的输入框添加一个ID属性：

<input class="form-control" name="codenamer" type="text" id="codenamer" />

比，您可以使用 jQuery 在您的输入字段上添加值：

<script type="text/javascript">
    function getEmp(codename){
        $("#codenamer").val(codename); // add value to codenamer field.
    }
</script>

Answer 3

如果您想在不重新加载页面的情况下执行此操作，则需要 Javascript。

首先，将代号添加到您使用 PHP 生成的选项属性中：

<option data-codename="<?= $emp['codename'] ?>" value="<?= $emp["employee_id"]; ?>"><?= $emp["surname"] . ', ' . $emp["firstname"]; ?></option>

然后在 JS 中，检查所选选项何时更改，从所选选项中提取代号并将其 data-codename 写入您的代号输入值。

类似这样的东西（使用 Jquery）：

$('#employee-selector').change(function() {
    var selected = $(this).find('option:selected');

    var codename = selected.attr('data-codename');

    //if the above fails, you may have to use this: (note the [0])
    //var codename = selected[0].attr('data-codename');

    $('#codenamer').val(codename);
});

这要求您将id='employee-selector' 放在您的选择元素上，并将id='codenamer' 放在您的代号输入字段上。

Answer 4

这个问题已经解决了。我只是改写了上面给出的代码。

<script type="text/javascript">
    function getEmp(codename){
         var res = codename.split(" ", 1 );
        document.getElementById("codenamer").value=res;
    }
</script>

和我的输入字段的调用者

id="codenamer"

感谢所有受访者。