title: How to make linked(dynamic?) select fields in oracle jet?
body: <p>Im very new to JS and OJET. I'm using oracle jet to create a form. I need to create two select fields, the firts displays a client's name and the next one must change is values with the selected client's team members. </p>
  
  <p>I have a JSON File with this format:</p>
  
  <pre><code>{
  "clients": [
      {
          "id": "C01",
          "name": "Client 1",
          "manager": "Manager 1",
          "team": [
              {
                 "id": "C1MEM1",
                 "name": "member 1"
              },
              {
                  "id": "C1MEM2",
                  "name": "member 2"
              },
              {
                  "id": "C1MEM3",
                  "name": "member 3"
              },
              {
                  "id": "C1MEM4",
                  "name": "Member 4"
              }
          ]
      },
      {
          "id": "C02",
          "name": "Client 2",
          "manager": "Manager 2",
          "team": [
              {
                 "id": "C2MEM1",
                 "name": "member 1"
              },
              {
                  "id": "C2MEM2",
                  "name": "member 2"
              },
              {
                  "id": "C2MEM3",
                  "name": "member 3"
              },
              {
                  "id": "C2MEM4",
                  "name": "member 4"
              }
          ]
      }
  </code></pre>
  
  <p>I managed to create a select field with the clients name:</p>
  
  <pre><code>self.clientsListVal = ko.observableArray(['C01']);
    self.clientsList = ko.observableArray();
    $.getJSON("http://localhost:8000/js/json/clients.json").
      then(function(data){
        $.each(data["clients"],function(){
          self.clientsList.push({
            value: this.id,
            label: this.name
          });
        });
      });
  </code></pre>
  
  <p>Then I tried to get the next select fields this way, but it doesn't work :( :</p>
  
  <pre><code>self.memberList = ko.observableArray();
  
  $.getJSON("http://localhost:8000/js/json/clients.json").
  then(function(data){
      $.each(data["clients"],function(){
          if (this.id === self.clientsListVal ) {
              $.each(this["team"], function(){
                  self.memberList.push({
                      value: this.id,
                      label: this.name
                  });
              });
          }
      });
  });
  </code></pre>
  
  <p>This is the HTML im using:</p>
  
  <pre><code>    &lt;div class="oj-applayout-content"&gt;
  &lt;div role="main" class="oj-hybrid-applayout-content"&gt;
    &lt;div class="oj-hybrid-padding"&gt;
      &lt;h3&gt;Dashboard Content Area&lt;/h3&gt;
      &lt;div&gt;
          &lt;label for="clients"&gt;Clients&lt;/label&gt;
          &lt;select id="clients"
          data-bind="ojComponent:
          {component: 'ojSelect',
          options: clientsList,
          value: clientsListVal,
          rootAttributes: {style:'max-width:20em'}}"&gt;
          &lt;/select&gt;
  
  
          &lt;label for="select-value"&gt;Current selected value is&lt;/label&gt;
          &lt;span id="select-value" data-bind="text: clientsListVal"&gt;&lt;/span&gt;
  
          &lt;label for="members"&gt;Members&lt;/label&gt;
          &lt;select id="members"
          data-bind="ojComponent: {component: 'ojSelect',
          options: memberList,
          value: memberListVal,
          rootAttributes: {style:'max-width:20em'}}"&gt;
          &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Any help or hint? thank you!.</p>
  
  <p>EDIT:
  I think the problem is that <strong>self.clientsListVal</strong> is returning a function not the current selected value. I added console.log(self.clientsListVal) to the view model to see the current value.</p>
  
  <p>If I change <strong>self.clientsListVal</strong> for a string:</p>
  
  <pre><code>if(this.id === 'C01'){}
  </code></pre>
  
  <p>I get the members of the client "C01".</p>
  
  <p>I tried changing  <strong>self.clientsListVal</strong> to <strong>$('#clients').val()</strong>, this is the id of the select input and i get undefined in the console.log.</p>
  
  <p>How can I get the select field string value inside the viewmodel?</p>