如何根据数据库中的值选择下拉列表中的值答案

【问题标题】：How to make a value in dropdown selected based on value from database如何根据数据库中的值选择下拉列表中的值
【发布时间】：2016-03-23 19:45:19
【问题描述】：

我有一个dropdown，它有三个选项User、Instructor 和Player。

现在我有一个table，它显示数据库中的list of all users。

username、firstname、lastname 和“更改权限”列。此更改权限列包含 dropdown 和三个选项“用户”、“玩家”和“讲师”，还有一个保存按钮。

现在我想让下拉菜单自动选择authority 的user。

例如：如果A 人有authority 或Player，则下拉菜单应选择玩家和如果B 人将authority 设置为instructor，则他应该选择相应的下拉菜单并选择讲师。

谁能帮我解决这个问题。谢谢。

最初是

     <select >

         <option value="${user[1]}"  selected> 
<c:out value="${user[1]}" /></option>  // this gives the current authority of person from database
                <option  value="1"> User </option> 
        <option value="2"> Player </option>
        <option  value="3"> Instructor  </option> 
                </select>

所以，我尝试了类似的东西

<select>
<option value="1" <c:if test="${user[1] == User}"> 
                       </c:if>>User</option>
<option  value="2" <c:if test="${user[1] == Player}"> 
                    </c:if>> Player </option>
<option  value="3" <c:if test="${user[1] == Instructor}"> 
                    </c:if>> Instructor</option>

【问题讨论】：

显示到目前为止您尝试过的内容

标签： javascript java select dropdown auto-populate

【解决方案1】：

显示所选下拉框的解决方案：下面的代码，其中 $dispatched 是从数据库中获取的值

<select name="dispatched">
 <option></option>
 <option value="YES"<?php if($dispatched=="YES"){ echo'selected="selected"';}>>YES</option>
 <option value="NO"<?php if($dispatched=="NO"){ echo'selected="selected"';}?>>NO</option>
</select>

【讨论】：

【解决方案2】：

我认为这就是您要寻找的。如果您想在默认情况下在<select> 下拉列表中选择特定选项，只需将selected 属性添加到该<option>

<select id="role">
    <option value="user">User</option>
    <option value="instructor">Instructor</option>
    <option value="player" selected>Player</option><!-- selected by default -->
</select>

在 JavaScript 中设置它：

document.getElementById('role').value = 'player';

【讨论】：

【解决方案3】：

这是自动从数据库中选择下拉值的众多示例之一。

public List<DefaultDropDownListModel> LoadTurnAroundTimesTypes(ESAMPR_Entities db)
    {
        List<DefaultDropDownListModel> list = new List<DefaultDropDownListModel>();

        var qry = db.AR_TAT.OrderBy(x => x.SEQUENCE);
        foreach(var i in qry)
        {
            DefaultDropDownListModel model = new DefaultDropDownListModel();
            model.Value = i.AR_TAT_NUM;
            model.Name = i.AR_TAT_NUM;
            model.Selected = i.DEFAULT_SELECTION == "1" ? true : false;
            list.Add(model);
        }

        return list;
    }

<select id="AR_TAT" class="form-control" name="arvm.AR_TAT">
<option value=""></option>
@foreach (var item in Model.TurnAroundTypes)
{
    if (item.Selected)
    {
        <option value="@item.Value" selected>@item.Name</option>
    }
    else
    {
        <option value="@item.Value">@item.Name</option>
    }
}

【讨论】：

【解决方案4】：

这是一个使用 Angular 的工作解决方案。你只需要在你的服务器上提供一个 REST api。我可以在 PHP 和 MySQL 中做一个例子...

 var app = angular.module('app', [])
      .controller('MainCtrl', function($scope, $http) {
        // you should get users from server
        /*$http.get('yourServerApiUrl').then(function(responseFromApi) {
          $scope.simulatedUser = responseFromApi;
        });*/
        // lets just simulate them
        $scope.simulatedUsers = [{
          username: 'username1',
          firstname: 'John',
          lastname: 'Bon',
          autority: 'Player'
        }, {
          username: 'user2',
          firstname: 'Alex',
          lastname: 'Noi',
          autority: 'User'
        }, {
          username: 'username3',
          firstname: 'Fred',
          lastname: 'Mer',
          autority: 'Player'
        }, {
          username: 'username4',
          firstname: 'Gal',
          lastname: 'Ban',
          autority: 'User'
        }, {
          username: 'user5',
          firstname: 'Va',
          lastname: 'Ben',
          autority: 'Instructor'
        }];
        // array of possible autorities
        $scope.autorities = ['User', 'Player', 'Instructor'];

        //submit to the server
        $scope.submit = function() {
          //$http.post('yourServerApiUrl', $scope.simulatedUsers);
          alert('users saved');
        };
      });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="app">
<head>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
</head>
<body ng-controller="MainCtrl">
  <form ng-submit='submit()'>
    <table class="table table-responsive table-hover">
      <thead>
        <tr>
          <th>username</th>
          <th>firstname</th>
          <th>lastname</th>
          <th>autority</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="u in simulatedUsers">
          <td>{{ u.username }}</td>
          <td>{{ u.firstname }}</td>
          <td>{{ u.lastname }}</td>
          <td>
            <select class='form-control' ng-model="u.autority" ng-options="o for o in autorities"></select>
          </td>
        </tr>
      </tbody>
    </table>
    <button class='btn btn-success'>Save</button>
  </form>
</body>
</html>

【讨论】：