0

I have a json object that has sites and clients for the sites. One site can have many clients.

I know how to populate the site drop down list box (parent) using knockout bindings. However, I cannot figure out how to populate the clients drop down list (child) when the onchange happens in the parent drop down list.

I would appreciate if someone with more experience could change my code below to show me how to achieve the master/child drop down list functionality.

Cheers

C

    var posterArray = ([
                           { SiteId: 1,
                             SiteName: "Mail",
                             ClientSite:[
                                { ClientId: 1, ClientName: "Mail Client A" }, { ClientId: 1, ClientName: "Mail Client B"}]  
                           },

                           { SiteId: 2,
                             SiteName: "DSAC",
                             ClientSite:
                                { ClientId: 1, ClientName: "DSAC Client A" }
                           }
    ]);


    var ViewModel = function () {
        var self = this;

        // Poster
        self.PosterList = ko.mapping.fromJS([]);
        self.PosterListEnable = false;

        self.refreshPosterList = function () {
            var data = [];
            if (posterArray.length == 0) {
                data = [{ SiteId: 'No Posters', SiteName: 'No Posters'}];
            } else if (posterArray.length == 1) {
                data = posterArray;
            } else {
                data = [{ SiteId: 'Select a Poster', SiteName: 'Select a Poster'}];
                data.push.apply(data, posterArray);
            }

            ko.mapping.fromJS(data, null, self.PosterList);
            self.refreshClientList();
        };


        //Client
        self.ClientList = ko.mapping.fromJS([]);
        self.refreshClientList = function () {

        };

    };

    var viewModel = new ViewModel();

    $(function () {

        ko.applyBindings(viewModel);
        viewModel.refreshPosterList();
    });

</script>
<fieldset class="SearchFilter">
    <legend>Search Filter</legend>
    <div class="SearchItem">
        <span>Poster:</span>
        <select id="dllPoster" data-bind="foreach: PosterList, disable:PosterList().length <= 1" onchange="viewModel.refreshClientList();">
            <option data-bind="text: SiteName, attr:{value:SiteId}"></option>
        </select>
        <select id="ddlClient" data-bind="with: PosterList.ClientSite ">
            <option data-bind="text: ClientName, attr:{value:ClientId}"></option>
        </select>
    </div>
</fieldset>

1 Answer 1

1

Knockout has a specific binding for drop down lists. Take look at the "options" binding: http://knockoutjs.com/documentation/options-binding.html

Here's a jsFiddle of your example: http://jsfiddle.net/9QVw9/

5
  • Hi ckal, Thanks for your reply and help. I will read the post you suggested and look at the jsFiddle.
    – Cleyton
    Apr 5, 2012 at 8:12
  • Hi ckal, can you please explain to me how the value: selectedPoster bind works? Your not assigning any value to it. Where do you set it to the selected value in the select? '<select id="dllPoster" data-bind="options: PosterList, optionsText: 'SiteName', value: selectedPoster, disable:PosterList().length <= 1" ></select> <select id="ddlClient" data-bind="options: selectedPoster().ClientSite, optionsText: 'ClientName', value: selectedClient">' </select>
    – Cleyton
    Apr 5, 2012 at 8:26
  • Hi, I am trying to add logic to my optionsCaption for the child select but it not working
    – Cleyton
    Apr 5, 2012 at 10:02
  • <select id="Select2" data-bind="options: ( selectedPoster().ClientSite!=undefined || selectedPoster().ClientSite!=null)? selectedPoster().ClientSite :'', optionsText:( selectedPoster().ClientSite!=undefined || selectedPoster().ClientSite!=null)? 'ClientName':'', value: ( selectedPoster().ClientSite!=undefined || selectedPoster().ClientSite!=null)? 'selectedClient':'', optionsCaption: ( selectedPoster().ClientSite==undefined)?'No Clients':( selectedPoster().ClientSite.length==1)?'':'Select a Client'"> </select>
    – Cleyton
    Apr 5, 2012 at 10:04
  • How do I add the id of the object to the value property of the options?
    – Cleyton
    Apr 5, 2012 at 10:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.