title: jquery: obtain select inside a table row
body: <p>I have a table row which looks like <img src="https://i.stack.imgur.com/BsagG.png" alt="enter image description here"></p>
  
  <p>the HTML looks like
  <img src="https://i.stack.imgur.com/cSLFU.png" alt="enter image description here"></p>
  
  <p>When the user changes the value of the Name field I pass the "select" to nameDropChanged function. After obtaining a reference to select I want to change the value of Number of Coupons select box. How can I obtain a reference to it using Jquery? Also there will  be many such exact rows in the table.</p>
  
  <p>Update : Here is the dummy HTML code and <a href="http://jsfiddle.net/pyufe/1/" rel="nofollow noreferrer">jsfiddle link</a></p>
  
  <pre><code>    &lt;table id="competitors_table" width="100%" style="border-bottom: #000000 solid 1px;"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Name:&lt;select name="CompetitorIDs_Setting_[]" onchange="nameDropDownChanged(this);"&gt;
              &lt;option value="0"&gt;N/A&lt;/option&gt;&lt;optgroup label="Similar Stores"&gt;&lt;/optgroup&gt;
              &lt;optgroup label="Other Stores"&gt;
              &lt;option value="1"&gt;flipkart&lt;/option&gt;
              &lt;option value="2"&gt;bigshoebazaar&lt;/option&gt;
              &lt;option value="160"&gt;presto&lt;/option&gt;
              &lt;option value="3"&gt;fabindia&lt;/option&gt;
              &lt;option value="4"&gt;fashnvia&lt;/option&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;select name="Position_Setting_[]" onchange="dropDownChanged(this);"&gt;
                  &lt;option value="1000"&gt;Top&lt;/option&gt;
                  &lt;option value="1001"&gt;Middle&lt;/option&gt;
                  &lt;option value="1002"&gt;Bottom&lt;/option&gt;                                                    
                  &lt;option value=""&gt;Enter Position&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type="text" name="PositionNumber_Setting_[]" size="3" style="display: none;"&gt;
          &lt;/td&gt;
          &lt;td&gt;Number of Coupons:&lt;select id="numberOfCoupons_Setting_[]"&gt;&lt;/select&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Javascript code</p>
  
  <pre><code>  function nameDropDownChanged(select)
  {
      var selectedIndex = select.selectedIndex;   
      var WebsiteName = select.options[selectedIndex].innerHTML;
      var couponCount = &lt;?php if(!empty($couponCount)){ echo json_encode($couponCount); }?&gt;;
  
      if(Object.keys(couponCount).length &gt; 0)
      {
          var numberOfCoupons = couponCount[WebsiteName];
          var numberOfCouponsDropDown = document.getElementById('numberOfCouponsSelect');
          $("#numberOfCouponsSelect").empty();
          if(numberOfCoupons &gt; 0)
          {
              for(var i=1; i &lt;= numberOfCoupons; i++)
              {
                  var option = document.createElement('option');
                  option.value = i;
                  option.innerHTML = i;
                  numberOfCouponsDropDown.appendChild(option);
              }
          }
          else
          {
              var option = document.createElement('option');
              option.value=1;
              option.innerHTML = "No Active Coupons";
              numberOfCouponsDropDown.appendChild(option);
          }
      }
  }
  </code></pre>