QuestionMarks QuestionMarks - 7 months ago 16
HTML Question

How to import dropdown value from table data

I have a java / Spring MVC application that includes forms that interface with tables. On one of the pages, I have designed it so that when a row is clicked on the table, form data is populated using the data that is in that row.

Javascript code:

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


This works well for the text form fields. Where I am running into a problem is in the
"userName"
field, since that is a list (
form:select
) field.

I'm not really sure how I would go about the process of having my app be able to locate the list index of a name in the dropdown list based on the text data that it is reading from the table.

Here is the html for the dropdown field:

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


The dropdown list,
${userList}
, is created by building a List in my DAO, along with the following RowMapper method:

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

When you set a value of a select element, in fact you are setting the option with this value as selected, while here you are using the name so you are dealing with the content of the option and not it's value.

So in your example when you have the selected userName from your table you just need to loop through the select options and set the appropriate option as selected.

This is the code you need:

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

This is a brief Snippet Example:

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