jQuery：根据所选选项显示/隐藏元素答案

【问题标题】：jQuery: show/hide element based on selected optionjQuery：根据所选选项显示/隐藏元素
【发布时间】：2013-06-27 13:07:35
【问题描述】：

我想在选中value='Attached File'的选项时向@ 987654321显示元素。请帮助我理解为什么我的代码不起作用。

我的代码：

<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>

【问题讨论】：

#excellence:like jQuery 可能不会喜欢这个 id，因为 CSS 和 jQuery 都将 : 用于伪类等。尝试类似#excellence-like
为什么你不使用 $('#attach') 作为 document.getElementById 而不是 .show() 或 .hide()？

标签： javascript jquery html magento

【解决方案1】：

你应该避免使用“:”，因为它是 css 选择器的一部分

试试这个...

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

【讨论】：

【解决方案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();
    }
});

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：