Dual ListBox

by Adlene Denni

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <table>
        <tr>
            <td>Liste des légumes :<br />
                <select id="liste_fruits" size="8" style="width:90px;">
                    <option value="ananas">Courgette</option>
                    <option value="banane">Asperge</option>
                    <option value="citron">Tomate</option>
                    <option value="fraise">Aubergine</option>
                    <option value="orange">Lentille</option>
                    <option value="pomme">Piment</option>
                    <option value="raisin">Artichaut</option>
                </select>
            </td>
            <td>
                <button id="ajouter" disabled="disabled">Ajouter</button><br />
                <button id="supprimer" disabled="disabled">Supprimer</button>
            </td>
            <td>Mon panier :<br />
                <select id="panier" size="8" style="width:90px;">
                </select>
            </td>
        </tr>
    </table>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

JavaScript

var viewModel = {
    availableTeamMembers: ko.observableArray([{
        "UserProfileId": 2,
        "TenantId": 1,
        "FirstName": "JANE",
        "LastName": "Adams",
        "FullName": "Courgette",
        "Title": "Secretary"},
    {
        "UserProfileId": 3,
        "TenantId": 1,
        "FirstName": "Sam",
        "LastName": "Spade",
        "FullName": "Asperge",
        "Title": "VP"},
    {
        "UserProfileId": 1,
        "TenantId": 1,
        "FirstName": "Jack",
        "LastName": "Frost",
        "FullName": "Citron",
        "Title": "President"},
    {
        "UserProfileId": 4,
        "TenantId": 1,
        "FirstName": "Jane",
        "LastName": "Lewis",
        "FullName": "Aubergine",
        "Title": "student"}]),
    EditableProjectTeamMembers: ko.observableArray([{
        "RoleId": 2,
        "Name": "Sam  Spade",
        "FirstName": "Sam",
        "LastName": "Spade",
        "FullName": "Lentille"}]),
    availableSelectedMembers: ko.observableArray([]),
    requestedTeamMembers: ko.observableArray([]),
    requestedSelectedMembers: ko.observableArray([]),
    userRoles: ko.observableArray([{
        "Selected": false,
        "Text": "Administrator",
        "Value": "1"},
    {
        "Selected": false,
        "Text": "Manager",
        "Value": "2"},
    {
        "Selected": false,
        "Text": "Staff",
        "Value": "3"}]),

    loadProjectTeam: function() {

        $.each(viewModel.EditableProjectTeamMembers(), function(n, item) {
            viewModel.requestedTeamMembers.push(item);
            viewModel.availableTeamMembers.remove(ko.utils.arrayFirst(viewModel.availableTeamMembers(), function(member) {
                return member.FullName === item.FullName;
            }));
        });

    },


    addRequested: function() {
        var requested = this.requestedTeamMembers;
        $.each(viewModel.availableSelectedMembers(), function(n, item) {
            if (!item.RoleId) {
               ...