jQuery: показать/скрыть элемент на основе выбранной опции

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

Вы должны избежать : в идентификаторе (или выберите с 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 2

попробовать это

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

Answer 3

Вы должны избегать использования ":", так как он является частью CSS селекторов

попробовать это ...

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