Question

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

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

username，firstname，lastname和更改权限＆＃39;柱。此更改权限列包含dropdown，其中包含三个选项＆＃39; user＆＃39;，＆＃39; player＆＃39;和＆＃39;讲师＆＃39;还有一个保存按钮。

现在我想让下拉菜单自动选择它authority的{{1}}。

例如：如果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>

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

Answer 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';

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

Answer 4

这是使用角度的工作解决方案。您只需在服务器上提供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>

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

4 个答案: