Databases
StackOverflow2013
Postsdbo
POKnockout.js Multiple dropdown lists.
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKnockout.js Multiple dropdown lists.
    primarykey
    data
    text
    <p>So, hello! Ive been trying to make a simple simple feature work with Knockout.js, but to no success. Been looking through forums and posts but still, no luck! </p> <p>So what i am trying to do is fill a few dropdown boxes with information from ObservableArrays. This is the code i have so far. But nothing att all is seen except the HTML code. </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Demo&lt;/title&gt; &lt;script src="Scripts/knockout-2.3.0.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(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()); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main-content"&gt; &lt;div id="main-search-content"&gt; From: &lt;select data-bind=" options: currentLocation, optionsText: 'name', optionsValue: 'name', optionsCaptation: 'Select....' "&gt;&lt;/select&gt; To: &lt;select data-bind=" options: targetAttraction, optionsText: 'name', optionsValue: 'price', optionsCaptation: 'Select....' "&gt;&lt;/select&gt; How: &lt;select data-bind=" options: transportationMode, optionsText: 'name', optionsValue: 'price', optionsCaptation: 'Select....' "&gt;&lt;/select&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p> </p> <p>As you might have guessed im rather new to javascript in general, but i do my best to try and learn. ive done all the tutorials on the website, but so far with this, it havent helped me find a solution. Would appriciate ANY help or hints. </p> <p>Best regards, </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USM K
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYou used `$(document)` but you did not include jQuery.
      singulars
      1. POKnockout.js Multiple dropdown lists.
      1. USSergiu Paraschiv
    2. COAdded now, thanks i totally missed that. Still, no change tho.
      singulars
      1. POKnockout.js Multiple dropdown lists.
      1. USM K
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload