Question

我有以下示例数据：

books = [
 {
  id: 1,
  name: Harry Potter,
  description: test1
 },
 {
  id: 2,
  name: Forest Gump,
  description: test2
 }
]

JSP

<select onchange="bookLib.changeBook()">
  <c:forEach var="book" items="${books }">
      <option value="${book.id}">
          <c:out value="${book.name}"/>
      </option>
  </c:forEach>
</select>

<input type="TEXT" id="descr" readonly/>

当“select”改变时，我需要在文本输入中设置$ {book.description}，用id“descr”标识。

我需要在函数bookLib.changeBook().js中使用jQuery实现它。

Answer 1

<select onchange="bookLib.changeBook(this);">
  <c:forEach var="book" items="${books }">
      <option value="${book.id}" data-description="${book.descripton}">
          <c:out value="${book.name}"/>
      </option>
  </c:forEach>
</select>

<input type="TEXT" id="descr" readonly/>

function changeBook(select) {
    $("#descr").val($(select).find("option:selected").attr("data-description"));
}

或者，如果您无法控制changeBook的签名：

<select id="books" onchange="bookLib.changeBook()">
  <c:forEach var="book" items="${books }">
      <option value="${book.id}" data-description="${book.descripton}">
          <c:out value="${book.name}"/>
      </option>
  </c:forEach>
</select>

<input type="TEXT" id="descr" readonly/>

function changeBook() {
    $("#descr").val($("#books option:selected").attr("data-description"));
}

如果选择更改，则设置输入字段

1 个答案: