jQuery：基於所選選項顯示/隱藏元素

Question

我想在選擇value='Attached File'的選項時顯示id=attach元素。 請幫助我理解為什么我的代碼不起作用。

我的代碼：

<ul class="form-list">
  <li id="excellence-form">
    <fieldset>
      <ul>
        <li class="wide">
          <label for="excellence:like" class="required"><em>*</em><?php echo $this->__('Initial Data') ?></label>
          <div class="input-box">
            <select class="required-entry" name="excellence[like]" id="excellence:like">
              <option value='0'><?php echo $this->__('Please Choose..');?></option>
              <option value='Not Attached' <?php if($this->getQuote()->getExcellenceLike() == 1){echo 'selected="selected"';} ?>><?php echo $this->__('Do Not Attach File');?></option>
              <option value='Attached File' <?php if($this->getQuote()->getExcellenceLike() == 2){echo 'selected="selected"';} ?>><?php echo $this->__('Attach File');?></option>
            </select>
          </div>
        </li>
        <li id="attach" style="display:none;" >
          <label class="required"><em>*</em><?php echo $this->__('Please Attach :') ?><span id='file_upload_text'></span></label>
          <div class="input-box">
            <input id="file_upload" type="file" name="file_upload" />
          </div>
          <input id="file_upload_path" type="hidden" name="file_upload_path" class='required-entry' />
          <input type="hidden" value='Attached File' name="file_upload_type" class='required-entry' />
        </li>
      </ul>
    </fieldset>
  </li>
</ul>

我的jQuery：

<script type="text/javascript">
  $(function() {
    $('#excellence:like').change(function(){
      if ($(this).val() == "Attached File") {
        document.getElementById("attach").style.display="block";
      } else {
        document.getElementById("attach").style.display="none";
      }
    });
  });
</script>

Answer 1

你應該避免使用“：”，因為它是css選擇器的一部分

試試這個...

$(function() {      
    $('.required-entry').change(function(){    // use class or use $('select')
        if ($(this).val() == "Attached File") {
            $("#attach").show();
        } else {
             $("#attach").hide();
        }
    });
});

Answer 2

您必須在您的ID中轉義:或select[id='excellence:like'] ）：

$('#excellence\\:like').change(function(){
    if ($(this).val() == "Attached File") {
        document.getElementById("attach").style.display="block";
        //jQuery alternative
        //$("#attach").show();
    } else {
        document.getElementById("attach").style.display="none";
        //jQuery alternative
        //$("#attach").hide();
    }
});

Answer 3

試試這個

$(function() {
    $('#excellence\\:like').change(function(){
        if ($(this).val() == "Attached File") {
            $("#attach").show();
        } else {
             $("#attach").hide();
        }
    });
});