Javascript 如何从表数据导入下拉列表值

我有一个java/SpringMVC应用程序，其中包括与表接口的表单。在其中一个页面上，我将其设计为当在表上单击一行时，使用该行中的数据填充表单数据

Javascript代码：

这适用于文本表单字段。我遇到的问题是用户名字段，因为这是一个列表表单：选择字段

我真的不知道如何让我的应用程序能够根据从表中读取的文本数据在下拉列表中找到名称的列表索引

以下是下拉字段的html：

---

通常，从服务器到前端获取数据的最佳方式是作为JSON字符串/对象，然后我们可以像您已经做的那样轻松地操作它

我想你差不多做到了，你只是少了一部分

在下面的示例中，我在一个表和菜单中列出了相同的用户，单击表行时，下拉列表中的所选用户为默认用户

例如，使用此示例表数据

JS:

HTML:

以下是完整的工作示例：

希望这有帮助

当您设置一个select元素的值时，实际上您是将该值设置为selected，而在这里您使用的是名称，因此您处理的是选项的内容，而不是它的值

因此，在您的示例中，当您从表中选择了用户名时，只需循环选择选项并将相应的选项设置为选中

这是您需要的代码：

这是一个简短的代码片段示例：

$'name'。在'change'上，函数{ var vName=document.getElementByIduserName； 对于vName.options中的i{ var optionText=typeof vName.options[i]。innerText！='undefined'？vName.options[i]。innerText:vName.options[i]。textContent； 如果optionText==$this.val{ vName.selectedIndex=i； 打破 } } }; 输入名称： 穆罕默德 阿兰 约翰 阿里 玛丽亚 李 爱丽丝

---

太好了，很高兴有帮助。

$('#table tbody').on('click', 'tr', function () {
    var idx = table.row(this).index();
    var vName = document.getElementById("userName");
    vName.value = table.cell(idx, 7).data();

<spring:bind path="model.userName">
    <label for="fullName">Select User:</label>
    <form:select cssClass="form-control" path="model.userName" id="userName" name="userName">
        <form:option value=""></form:option>
        <form:options items="${userList}" itemLabel="fullName" itemValue="ID"/>
    </form:select>
</spring:bind>

private static class UserRowMapper implements RowMapper {
    public Object mapRow(ResultSet rs, int i) throws SQLException {
        return new Users(rs.getLong("ID"),
        rs.getString("LNAME") + ", " + rs.getString("FNAME"));
    }
}

var users = [{
  ID: 0,
  LNAME: "First",
  FNAME: "Senior"
}, {
  ID: 1,
  LNAME: "Second",
  FNAME: "Sir"
}, {
  ID: 2,
  LNAME: "Third",
  FNAME: "Chap"
}, {
  ID: 3,
  LNAME: "Fourth",
  FNAME: "Mr"
}];


mag.module('userName', {
  view: function(state) {

    state.tr = state.option = users.map(function(user) {
      return {
        _selected: user.ID == state.index ? true : null,
        _text: user.FNAME + ' ' + user.LNAME,
        _value: user.ID
      }
    });

    state.$tr = {
      _onclick: function(e, i) {
       state.index = i;
       state.span = users[i].FNAME + users[i].LNAME
      }
    }
  }
});

<div id="userName">
  <table>
    <tr></tr>
  </table>
  <hr/>
  <label for="fullName">Select User: <span></span></label>
  <select class="form-control" name="userName">
    <option></option>
  </select>
</div>

$('#table tbody').on('click', 'tr', function() {
  var idx = table.row(this).index();
  var vName = document.getElementById("userName");

  for (i in vName.options) {
    //I test on the innerText here because FF doesn't support it
    var optionText = typeof vName.options[i].innerText !== 'undefined' ? vName.options[i].innerText : vName.options[i].textContent;
    if (optionText === table.cell(idx, 7).data()) {
      vName.selectedIndex = i;
      break;
    }
  }
});