如何从表格数据中导入下拉值

Posted 2023-02-26

【中文标题】如何从表格数据中导入下拉值

【英文标题】：How to import dropdown value from table data

【发布时间】：2015-12-07 00:03:29

【问题描述】：

我有一个 java / Spring MVC 应用程序，其中包括与表交互的表单。在其中一个页面上，我对其进行了设计，以便在单击表格上的一行时，使用该行中的数据填充表单数据。

Javascript 代码：

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

这适用于文本表单字段。我遇到问题的地方是 "userName" 字段，因为那是一个列表 (form:select) 字段。

我不太确定如何让我的应用能够根据从表中读取的文本数据在下拉列表中找到名称的列表索引。

这是下拉字段的 html：

<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>

下拉列表 $userList 是通过在我的 DAO 中构建一个 List 以及以下 RowMapper 方法来创建的：

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"));
    

【参考方案1】：

当您设置select 元素的value 时，实际上您将带有此value 的option 设置为selected，而在这里您使用的是名称，因此您正在处理option 的强>内容和不是它的价值。

因此，在您的示例中，当您从表中选择 userName 时，您只需循环选择选项并将适当的 option 设置为 selected。

这是您需要的代码：

$('#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;
    
  
);

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

$('#name').on('change', function() 
  var vName = document.getElementById("userName");
  
  for (i in vName.options) 
    var optionText = typeof vName.options[i].innerText !== 'undefined' ? vName.options[i].innerText : vName.options[i].textContent;
    
    if (optionText === $(this).val()) 
      vName.selectedIndex = i;
      break;
    
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Enter name:
<input type="text" id="name" />
<select name="userName" id="userName">
  <option value="">Muhammad</option>
  <option value="">Alain</option>
  <option value="">John</option>
  <option value="">Ali</option>
  <option value="">Maria</option>
  <option value="">Lee</option>
  <option value="">Alessandro</option>
</select>

【讨论】：

太好了，很高兴它有帮助。

【参考方案2】：

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

我认为你几乎在那里，你只是缺少一个部分。

在下面的示例中，我在表格和菜单中列出相同的用户，单击表格行时，下拉列表中的选定用户是默认的。

以这个示例表数据为例。

JS：

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
      
    
  
);

html：

<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>

这是完整的工作示例：http://jsbin.com/bokiqebezo/1/edit?html,js,output

希望这会有所帮助！