title: KnockoutJS: Handling Select Boxes. Selecting a default value and removing an existing item
body: <p>I am having trouble handling checkboxes in Knockout JS.</p>
  
  <p><strong>jsfiddle link</strong>: <a href="http://jsfiddle.net/wenbert/Xyuhk/72/" rel="nofollow noreferrer">http://jsfiddle.net/wenbert/Xyuhk/72/</a></p>
  
  <p>Note that I have provided 2 select boxes for each parent (Hero). Each one is using a different way but both are more or less "observing" the same object.</p>
  
  <p><strong>Workflow</strong></p>
  
  <p><img src="https://i.stack.imgur.com/h4Xoo.png" alt="enter image description here"></p>
  
  <ol>
  <li>Click on a gray box</li>
  <li>A box with a blue dotted line should appear containing the items of the Select box.</li>
  <li>From here, you can edit the items of the select box.  </li>
  <li>Fiddle here: <a href="http://jsfiddle.net/wenbert/Xyuhk/72/" rel="nofollow noreferrer">http://jsfiddle.net/wenbert/Xyuhk/72/</a></li>
  </ol>
  
  <p><strong>The Problems</strong></p>
  
  <ol>
  <li>When I remove an item, I am not able to remove it from the Select boxes. Note that I do not want to completely remove it from the object. I just want the current item to be flagged as "isDeleted".</li>
  <li>Select A - hides the item but it leaves an empty option in the select box.</li>
  <li>Select B - the "ifnot: isDeleted" is not having any effect on the options.</li>
  </ol>
  
  <p><strong>The Question</strong></p>
  
  <p>How do I handle Select Boxes? I have rendered 2 Select Boxes in 2 different ways to try to have the <code>ifnot: isDeleted</code> take effect but none of them are working.</p>
  
  <p>Update: With this setup, how do I do the "selected" value of the select box?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;button data-bind="click: addHero"&gt;Add Hero&lt;/button&gt;
  &lt;ul data-bind="foreach: heroes"&gt;
      &lt;li class="parent" data-bind="ifnot: isDeleted, click: $parent.selectHero"&gt;
          &lt;input class="big-box" type="text" data-bind="value: name" /&gt;
          &lt;button class="btn-small" data-bind="click: $parent.removeHero"&gt;Remove Hero&lt;/button&gt;
          &lt;br/&gt;
  
          SKILLS: 
  
          Select A) &lt;select data-bind="foreach: skills"&gt;
              &lt;option data-bind="value: name, text: name, ifnot: isDeleted"&gt;&lt;/option&gt;            
          &lt;/select&gt;
          Select B) &lt;select data-bind="options: skills, optionsText: 'name', value: selected_skill.name, ifnot: isDeleted"&gt;         
          &lt;/select&gt;
          &lt;br/&gt;
          &lt;span class="instructions"&gt;(Step 1: Click somewhere here)&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="edit-panel" data-bind="if: selectedHero"&gt;
      Edit Skill:&lt;br/&gt;
      &lt;div data-bind="with: selectedHero"&gt;
          &lt;button class="btn-small" data-bind="click: addSkill"&gt;Add Skill&lt;/button&gt;
          &lt;ul data-bind="foreach: skills"&gt;
              &lt;li data-bind="ifnot: isDeleted"&gt;
                  &lt;button class="btn-small" data-bind="click: $parent.setAsDefaultSkill"&gt;Set as default&lt;/button&gt;
                  &lt;input data-bind="value: name" /&gt;
                  &lt;button class="btn-small" data-bind="click: $parent.removeSkill"&gt;Remove Skill&lt;/button&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;span class="instructions"&gt;(Step 2: Remove a Skill, then have a look at the Select Box above.)&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;pre data-bind="text: ko.toJSON($data, null, 2)"&gt;&lt;/pre&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var initialData = [
      {
          id: '1',
          name: "Batman",
          isDelete: false,
          selected_skill: {name: "Boxing", isDeleted: false},
          skills: [
              { id: '1', name: "Karate", isDeleted: false },
              { id: '2', name: "Boxing", isDeleted: false},
              { id: '6', name: "Sonar", isDeleted: false}
          ]
      },
      {
          id: '2',
          name: "Hulk",
          isDelete: false,
          skills: [
              { id: '3', name: "MMA", isDeleted: false },
              { id: '4', name: "Rage", isDeleted: false},
              { id: '5', name: "Extra Strength", isDeleted: false}
          ]
      },
  ];
  
  
  function Hero(data) {
      var self = this;
      self.name = ko.observable(data.name);
      self.selected_skill= ko.observable(data.selected_skill);
      self.skills = ko.observableArray(ko.utils.arrayMap(data.skills, function(i) {
          return new Skills(i);
      }));
  
      self.addSkill = function() {
          self.skills.push(new Skills({name: '---', isDeleted: false}));
      }
  
      self.setAsDefaultSkill = function(item) {
          self.selected_skill(item);
      }
  
      self.isDeleted = ko.observable(data.isDeleted);
  
      self.removeSkill = function(item) {
          item.isDeleted(true);
      }
  }
  
  function Skills(data) {
      var self = this;
      self.name = ko.observable(data.name);
      self.isDeleted = ko.observable(data.isDeleted);
  }
  
  function SuperheroViewModel(data) {
      var self = this;
      self.heroes = ko.observableArray(ko.utils.arrayMap(data, function(i){
          return new Hero(i);
      }));
  
      self.selectedHero = ko.observable();
      self.selectedHero.skills = ko.observableArray();
  
      self.addHero = function() {
          self.heroes.push(
              new Hero({
                  name: 'Wolverine',
                  isDelete: false,
                  skills: [{name: 'Breathing', isDeleted: false}],
              })
          );
      }
  
      self.selectHero = function(item) {
          self.selectedHero(item);
      }
  
      self.removeHero= function(item) {
          item.isDeleted(true);
      }
  }
  
  ko.applyBindings(new SuperheroViewModel(initialData ));
  ​
  ​
  </code></pre>
  
  <p>I hope everything is clear.</p>
  
  <p>Any reply will be greatly appreciated.</p>
  
  <p>THanks!</p>