如何從表數據導入下拉值

Question

我有一個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"));
    }
}

Answer 1

當您設置一個value一個中select元素，實際上您正在設置option與此value的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> 

Answer 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

希望這可以幫助！