Juniper Juniper - 4 months ago 12
HTML Question

jQuery: show/hide element based on selected option

I want to show element with

id=attach
when the option with
value='Attached File'
is selected. Please help me to understand why my code does not work.

My code:

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


My 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

You have to escape the : in your ID (or select with 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();
    }
});