CODEWITHSUNDEEP
knockout.js
abritez
abritez

Reputation: 2626

Setting OptionValue in Knockoutjs cascading dropdown

Have a wierd issue where everything works fine until i specify optionsValue. You could see my problem here

works http://jsfiddle.net/abritez/ttyhE/2/

doesn't work http://jsfiddle.net/abritez/ttyhE/4/

All you need to do is try running it with the select that that is commented, and you will see the issue when trying to cascade.

JSON data

var productCategories = [{
"name": "Comapany A",
"abbr": "cA",
"disiplineList": [{
    "name": "Math",
    "abbr": "math",
    "courseList": [{
        "name": "Algebra",
        "abbr": "alg"
    }]
}, {
    "name": "English",
    "abbr": "eng",
    "courseList": [{
        "name": "Phonics",
        "abbr": "phon"
    }]
}]
}, {
"name": "Company B",
"abbr": "cB",
"disiplineList": [{
    "name": "Gym",
    "abbr": "gym",
    "courseList": [{
        "name": "Kick Ball",
        "abbr": "kb"
    }]
}]
}];

HTML code

<table width='100%'>
<tbody data-bind='foreach: lines'>
  <tr>
         <td>

            <select data-bind='options: productCategories, optionsText: "name",  optionsCaption: "Select...", value: company'> </select>

        </td>
    </tr>
    <tr>
         <td data-bind="with: company">
            <select data-bind='options: disiplineList, optionsText: "name", optionsCaption: "Select...", value: disipline'> </select>
        </td>
    </tr>
     <tr>
         <td data-bind="with: disipline">
            <select data-bind='options: courseList, optionsText: "name",  value: product'></select>
        </td>
    </tr>

</tbody>
</table>

​ Java Script (knockoutjs)

function ProductLine(){
                    self.company = ko.observable();
                    self.disipline = ko.observable();
                    self.product = ko.observable();

                    // Whenever the category changes, reset the product selection
                    self.company.subscribe(function() {
                        self.disipline(undefined);
                        self.product(undefined);
                    });
                }

                function Product(){
                    self.lines = ko.observableArray([new ProductLine()]); // Put one line in by default
                }

                ko.applyBindings(new Product());​

​

Upvotes: 0

Views: 1833

Answers (1)

Jaime Yule
Jaime Yule

Reputation: 1081

Still i don't get it.

But if you want to show name and abbr u can: 

 <select data-bind='options: productCategories,
       optionsText: function(item) {return item.name + " - " + item.abbr},  optionsCaption: "Select...", value: company'> </select>

if u want to display your abbr you can:

<td data-bind="with: company">
                            <select data-bind='options: disiplineList, optionsText: "name", optionsCaption: "Select...", value: disipline'> </select>
                             <span data-bind="text: abbr"/> <-- like this
                        </td>

Upvotes: 1

Related Questions