Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" type="text/javascript"></script>
    <script>
var SimulationSoftwareData =
{
 "語言": {
 "國語": "100",
 "英語": "101"
 },
 "其它": {
 "數學": "200"
 }
};
var SubCatgs = {
    "國語": [
        { t: "甲", v: "甲" },
        { t: "乙", v: "乙" },
        { t: "丙", v: "丙" },
        { t: "丁", v: "丁" },
    ],
    "英語": [
        { t: "A", v: "A" },
        { t: "B", v: "B" },
        { t: "C", v: "C" }
    ],
    "數學": [
        { t: "1", v: "1" },
        { t: "2", v: "2" },
        { t: "3", v: "3" }
    ]
};
    </script>
    <script>
​
        var SimulationName = [];
        for (var propName in SimulationSoftwareData)
            SimulationName.push(propName);
​
        function UserViewModel(id, simulations, fields, icon) {
            var self = this;
            self.id = id;
​
            self.simulations = ko.observableArray(SimulationName);
​
            self.simulation = ko.observable();
​
            self.fields = ko.computed(function () {
                var areaData = SimulationSoftwareData[self.simulation()];
                var options = [];
                if (areaData) {
                    for (var propName in areaData) {
                        options.push({
                            value: propName,
                            text: propName
                        });
                    }
                }
                return options;
            });
            
            self.fieldId = ko.observable();
            
            self.icons = ko.computed(function() {
                    var  fieldId = self.fieldId();
                    return SubCatgs[fieldId];
            });
            self.icon = ko.observable();
            
        }
​
        function MyViewModel() {
            var self = this;
            self.users = ko.observableArray();
            self.removeUser = function (user) {
                self.users.remove(user);
            }
        }
​
        $(function () {
            var vm = new MyViewModel();
            var c = 1;
            $("#btnAddUser").click(function () {
                vm.users.push(new UserViewModel(
                    c++,
                    self.simulation = self.simulations,
                    self.areaZip = self.fields));
​
            });
            ko.applyBindings(vm);
            
        });
    </script>
    <style type="text/css">
        .styleW25
        {
            width: 25px;
        }
        .styleW100
        {
            width: 100px;
        }
        </style>
</head>
<body>
<input type="button" value="Add" id="btnAddUser" />
共 <span data-bind="text: users().length"></span> 筆
<table id="addtable" border="1" cellpadding="3" style="border:1px #000000 solid;text-align:center;width: 1332px;">
            <thead>
        <tr><th class="styleW25">No.</th>
            <th class="styleW100">主分類<span class="auto-style13">*</span></th>
            <th class="styleW100">次分類<span class="auto-style13">*</span></th>
            <th class="styleW100">次次分類<span class="auto-style13">*</span></th>
    </thead>
    <tbody data-bind="foreach: users">
        <tr>
            <td class="styleW25"><span class="styleW25" data-bind="text: id" ></span></td>
            <td class="styleW100"><select required class="styleW100" name ="SimulationName" data-bind="options: simulations, optionsCaption: '請選主分類', value: simulation"></select></td>
            <td class="styleW100"><select required class="styleW100" name ="FieldName" data-bind="options: fields, optionsCaption: '請選擇次分類', optionsText: 'text', optionsValue: 'value', value: fieldId"></select></td>
            <td class="styleW100"><select required class="styleW100" name="AnalysisProject" data-bind="options: icons, optionsCaption: '請選擇次次分類', optionsText: 't', optionsValue: 'v', value: icon"></select></td>
        </tr>
    </tbody>
        </table>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
darkthreadpro
0viewers