Question

我想在选择id=attach的选项时显示带value='Attached File'的元素。请帮助我理解为什么我的代码不起作用。

我的代码：

<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();
        }
    });
});

jQuery：基于所选选项显示/隐藏元素

3 个答案: