Question

所以，你好！我一直试图用Knockout.js做一个简单的简单功能，但没有成功。一直在寻找论坛和帖子，但仍然没有运气！

所以我要做的是用ObservableArrays中的信息填充一些下拉框。这是我到目前为止的代码。但除了HTML代码之外，什么都看不到。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<script src="Scripts/knockout-2.3.0.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        function location(name, id) {
            var self = this;

            self.Name = name;
            self.Id = id;
        }

        function attraction(name, price) {
            var self = this;

            self.Name = name;
            self.Price = price;
        }

        function transportation(name, price) {
            var self = this;

            self.Name = name;
            self.Price = price;
        }

        function BookingViewModel() {
            var self = this;

            self.currentLocation = ko.observableArray([
                new location("Istanbul", "0"),
                new location("Ankara", "1"),
                new location("Izmir", "2")
            ]);
            self.selectedLocation = ko.observable();

            self.targetAttraction = ko.observableArray([
                new attraction("Aspendos Theatre", "200"),
                new attraction("Library of Celsus", "150"),
                new attraction("Hagia Sophia", "140")
            ]);
            self.selectedAttraction = ko.observable();

            self.transportationMode = ko.observableArray([
                new transportation("Walk", "0"),
                new transportation("Bus", "50"),
                new transportation("Train", "75")
            ]);
            self.selectedTransportation = ko.observable();
        }
        ko.applyBindings(new BookingViewModel());
    });
</script>
</head>
<body>
<div id="main-content">
    <div id="main-search-content">
        From: <select data-bind="
            options: currentLocation,
            optionsText: 'name',
            optionsValue: 'name',
            optionsCaptation: 'Select....'
        "></select>
        To: <select data-bind="
            options: targetAttraction,
            optionsText: 'name',
            optionsValue: 'price',
            optionsCaptation: 'Select....'
        "></select>
        How: <select data-bind="
            options: transportationMode,
            optionsText: 'name',
            optionsValue: 'price',
            optionsCaptation: 'Select....'
        "></select>
    </div>

</div>

正如您可能已经猜到我对javascript一般都是新手，但我尽我所能去尝试和学习。我已经完成了网站上的所有教程，但到目前为止，它还没有帮助我找到解决方案。会恭喜任何帮助或提示。

致以最诚挚的问候，

Answer 1

optionsText和optionsValue值区分大小写，因此您需要'Name'，而不是'name'。

Here's a fiddle这项工作应该如此。

Knockout.js多个下拉列表。

1 个答案: