Get selected values from dynamically created dropdowns

Question

I'm using KnockoutJS and durandalJS 2.0. I'm dynamically adding two drop-downs based on the database table entries and populating them with data form another table. Each drop-down also has a check-box. How do I get the selected drop-down values?

enter image description here

models

var dataToAdd = {
    mydata_Id: ko.observable(),
    mydata_Name: ko.observable(),
    mydata_data: ko.observableArray([dataTask])
};

var dataTask = {
    taskId: ko.observable(),
    dropdownId: ko.observable()
};

var taskList=ko.observableArray([]);//get data from database table. Consider there are two entries.
var dropdownData=ko.observableArray([]); //get the dropdown data

View

//Since *taskList* has two entries, two dropdowns with their respective checkbox will get generated.
<div data-bind="foreach:taskList">
    <label><input type="checkbox" data-bind="checked: true" />
    <span data-bind="text:Name"></span></label>    

    <select data-bind="options: $root.DropdownData, optionsValue: 'Id', optionsText: 'Name', optionsCaption: 'Select...', value: $root.dataTask.dropdownId</select>
</div>

First: How do I get the selected value for each drop-down when I hit the ADD button? When I use the value: $root.dataTask.dropdownId, both of the drop-downs get changed to the same selected value. When I check the checkbox, dropdown should be enabled and after selecting, I should be able to update a observable Array like below:

{taskId:44,dropdownId:10},{taskId:55,dropdownId:11}

Second: Also, when I uncheck the check-box, the respective drop-down should get disabled and the entry should be reomoved from the observable Array.

If both `select` elements use `value: $root.dataTask.dropdownId`, they point to the _same_ value holder. Thus, the behavior you describe. You'll need to setup a context sensitive dropdown, but with the snippets provided it's difficult to provide guidance on a way to achieve that. — Origineil, Dec 03 '13 at 17:52

score 4 · Answer 1 · answered Dec 27 '13 at 15:47

Your question has a lot of uncertainty to it, nevertheless I have included a working fiddle demonstrating what you are looking for -

http://jsfiddle.net/Lxt7E/1/

<div data-bind="foreach: Dropdowns">
    <label><input type="checkbox" data-bind="checked: checkedObs" />
    <span data-bind="text: label"></span></label>    

    <select data-bind="disable: checkedObs, options: theseOptions, optionsText: 'Name', optionsCaption: 'Select...', value: selectedOption"></select>
</div>

<button data-bind="click: addButton">Add</button>

In a nutshell, what you can do is create instances of a model such as 'dropdown' in this case and use Knockout's foreach binding to render n number of them. The instance of a dropdown contains the observables that do what you are looking for and could be used in the add function to decide whether to write the values or w/e

Get selected values from dynamically created dropdowns

1 Answers1