show/hide text box based on selected drop down

select_other.html

<!--
  the select needs
  - "has_other" css class
  - "data-other" attribute, which points to the id of the element to hide/show (normally a textbox)
  - "data-other-text" attribute, which indicates the text which indicates that other has been selected
-->

<select class="has_other" data-other="#textbox_id" data-other-text="...other">
  <option>option 1</option>
  <option>...other</option>
</select>
<input type="text" id="textbox_id" name="...." placeholder="Enter your own value" />

select_other.js

  // handle cases where dropdown's have an "other" option
  $.each( $("select.has_other").change(function() {
    updateOther(this, true);
  }), function() { 
    updateOther(this);
  });

  function updateOther(select, focus) {
    var $select = $(select);
    var $other = $($select.data("other"));
    var other_text = $select.data("other-text");
    var text = $select.find("option:selected").text();
    if (text == other_text) {
      $other.show();
      if (focus) $other.focus();
    } else {
      $other.val("").hide();
    }
  }