title: How to show input field, if "other" is selected as option in dropdown?
body: <p>Trying to get this field to stay hidden and only show when a user selects "other" in the drop down, but also hide the field if the user clicked it by accident and then changes the option to a value that is not "other". The following code is made from a survey that I'm trying to edit with some CSS and JS, so I do not have access to the actual code to change things.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select name="1684_51635_4_146338" id="1684_51635_4_146338" onchange="choiceSelected('1684_51635_4_146338', this.selectedIndex);" class="howHear"&gt;
      &lt;option value="NOREPLY"&gt;Please select response&lt;/option&gt;
      &lt;option value="Social Media"&gt;Social Media&lt;/option&gt;
      &lt;option value="Email"&gt;Email&lt;/option&gt;
      &lt;option value="Family or Friend"&gt;Family or Friend&lt;/option&gt;
      &lt;option value="Service provider referral"&gt;Service provider referral&lt;/option&gt;
      &lt;option value="other"&gt;other&lt;/option&gt;
  &lt;/select&gt;
  &lt;tr valign="top" class="old-school"&gt;
      &lt;td width="5%" class="req" align="right" nowrap="nowrap"&gt;
          &amp;nbsp;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;label class="wrapable" for="1684_51635_5_146441"&gt;
              &lt;span class="aural-only" style="position: absolute; left: -9999px;"&gt;Question - Not Required -&lt;/span&gt;
              &lt;div class="explicitWrap"&gt;Other:&lt;/div&gt;
          &lt;/label&gt;
          &amp;nbsp;
          &lt;br&gt;
          &lt;span class="NetscapeFix"&gt;&lt;input type="text" name="1684_51635_5_146441" id="1684_51635_5_146441" value="" size="30" maxlength="40" class="otherHear"&gt;&lt;/span&gt;
          &lt;br&gt;
          &lt;br&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I've added classes <code>.howHear</code> and <code>.otherHear</code> to them using JS, and then attempted this to hide the field and show it based on option:</p>
  
  <pre><code>//if other selected in howHear drop down, show .otherHear input field
     $('#1684_51635_4_146338').on('change',function(){
          if( $('#1684_51635_4_146338').val()==="other"){
          $("#1684_51635_5_146441").show()
          }
          else{
          $("#1684_51635_5_146441").hide()
          }
      });
  </code></pre>
  
  <p>However, the problem is the "other:" input field is always showing doesn't matter if an option is selected or not. I tried looking at other solutions on SOF but couldn't get them to work for this either. Note that I am using other drop downs on the survey that also have this.selectedIndex as part of its onchange function if that makes a difference.</p>
  
  <p>All suggestions are really appreciated! </p>
  
  <p>Thanks</p>