Load selected values in dropdown on selecting value from another dropdown

Question

I have 2 dropdowns. When i select value from one dropdown it will load values in another dropdown depending upon what is selected.

Here is my html code

<select data-bind="options: filters, value: filter"></select>

<select data-bind="options: filteredItems, optionsText: 'name'"></select>

Here is my knockout code

var ViewModel = function(data) {
var self = this;
self.filters = ko.observableArray(data.filters);
self.filter = ko.observable('');
self.items = ko.observableArray(data.items);
self.filteredItems = ko.computed(function() {
    var filter = self.filter();
    if (!filter || filter == "None") {
        return self.items.slice(0, 6);
    } else {
        return self.items.slice(2);
    }
  });
};


  var initialData = {
     filters: ["None", "Old", "New", "Super"],
       items: [{ name: "Corvette", type: "Old"},
       { name: "Charger", type: "Old"},
       { name: "Prius", type: "New"},
       { name: "Magnum", type: "New"},
       { name: "McLaren", type: "Super"},
       { name: "Saleen", type: "Super"}]


   ko.applyBindings(new ViewModel(initialData));

When i select Type as None then it selects all Cars and if i select type other than None then it should only select "Charger" and "Magnum"

Here is the link to fiddle

well, the fiddle seems to work according to what you want, no ? — Jalayn
– Jalayn, Commented Apr 25, 2013 at 17:30
@Jalayn y fiddle loads first 2 values when i select Type other than None — DevelopmentIsMyPassion
– DevelopmentIsMyPassion, Commented Apr 25, 2013 at 17:52

Jalayn · Accepted Answer · 2013-04-25 18:14:57Z

1

First of all, if you want to return all items, just return self.items(), the slice is not needed. If you want to return items matching the filter, this should work:

self.filteredItems = ko.computed(function() {
    var myFilter = self.filter();
    if (!myFilter || myFilter == "None") {
        return self.items();
    } else {
        var tempArray = [];
        for(i=0; i<self.items().length; i++) {
            if(self.items()[i].type == myFilter) {
                tempArray.push(self.items()[i]);
            }
        }
        return tempArray;
    }
});

Check the working fiddle.

If you want to select only "Charger" and "Magnum" here it goes:

self.filteredItems = ko.computed(function() {
    var myFilter = self.filter();
    if (!myFilter || myFilter == "None") {
        return self.items();
    } else {
        return [ self.items()[1], self.items()[3] ];
    }
});

edited Apr 25, 2013 at 18:14

answered Apr 25, 2013 at 17:59

Jalayn

9,3145 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DevelopmentIsMyPassion Over a year ago

it should only select "Charger" and "Magnum. Now it selects first 2 which it was working before.

Jalayn Over a year ago

ok, check the second function, this should do what you want. I updated the fiddle: jsfiddle.net/bx6TN/8

DevelopmentIsMyPassion Over a year ago

i have one query. Please see my updated fiddle jsfiddle.net/bx6TN/18. I have added another dropdown. I want to load values based on subscribe event of the Type dropdown.

Collectives™ on Stack Overflow

Load selected values in dropdown on selecting value from another dropdown

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related