How to make a value in dropdown selected based on value from database

Question

I have a dropdown which has three options User, Instructor and Player.

Now i have a table which displays the list of all users from the database.

The username, firstname, lastname and a 'change authority' column. This change authority column has the dropdown with three options 'user', 'player' and 'instructor' and also a save button are present.

Now i want to have the drop down to auto select the authority of it's user.

For ex: if A person has authority of Player the dropdown should have player as selected and if B person has authority as instructor he should have the corresponding dropdown with instructor selected.

Can anyone help me with this. Thanks.

The initial one was

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

So, i tried something like

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

show what you have tried so far – Moumit Mar 23 '16 at 19:56 — Moumit, Mar 23 '16 at 19:56

score 2 · Answer 1 · edited Mar 17 '18 at 05:43

2

Solution to display the selected drop-box : code below where $dispatched is the value got from the database

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

edited Mar 17 '18 at 05:43

Pang

9,564
146
81
122

answered Mar 17 '18 at 05:23

cruzier

358
2
14

score 0 · Answer 2 · answered Mar 23 '16 at 20:02

I think this is what you're looking for. If you want to select a specific option in a <select> dropdown by default, just add the selected attribute to that <option>

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

To set it in JavaScript:

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

score 0 · Answer 3 · answered Mar 23 '16 at 20:02

Here is one example of many to automatically select a drop down value from the database.

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

score 0 · Answer 4 · answered Mar 23 '16 at 20:54

Here a working solution using angular. You just have to provide a REST api on your server. I can do an example in PHP and 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>

How to make a value in dropdown selected based on value from database

4 Answers4