Complex html seniors and parent selector not working in any browser - jquery

Question

I have pasted a stand alone html code below which will help to understand. I want to show hide two input fields on change one dropdown.

I do not what is wrong in it.

Can anybody send me what is wrong and need to fix?

$(document).ready(function() {
      $('#containerId').find('select[name="Field"]').live('change', function(){
      
      var fieldi = $(this).val();
      
      if(fieldi.length > 1 && fieldi=='4') {
      
    	$(this).parent().children('div.formRow' ).find('.FieldName').hide();
    	$(this).parent().children('div.formRow' ).find('.dropdownName').show();
    
    	}
    	
    	if(fieldi.length > 1 && fieldi=='2') {
      
    	$(this).parent().children('div.formRow' ).find('.FieldName').show();
    	$(this).parent().children('div.formRow' ).find('.dropdownName').hide();
    
    	}
                        
      });
      
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id='#containerId'>
    
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    
    <fieldset name="fieldset1" namex="fieldset1"  >
             
    	   <div class="formRow  ">
    			<div class="labelContainer"><label class="rowLabel">label_if<span class="validationMark"></span></label></div>
    				<div class="rowControl">
    					 <select id="xrule_1" name="Field"  class="">
    						<option value="">Please Select</option>
    						<option value="2">Field on</option>
    						<option value="4">Field 2</option>
    						<option value="3">Field imported on</option>
    					 </select>
          </div>
       </div>
       
       <div class="formRow .dropdownName "  style="display: none;"> 
          <div class="rowControl">
             <select id="f_1rator" name="rator">
    			<option value="">Please select</option>
    			 <option value="2">Field on</option>
                <option value="4">Field 2</option>
             </select>
          </div>
       </div>
       
       <div class="formRow .FieldName" style="display: none;">
          
    	  <input type="text" name="valuexx" class="valuexx" id="v_1"  value="" />
    	   
       </div>
    </fieldset>
    
    
    
    <fieldset name="fieldset2" namex="fieldset2"  >
             
    	   <div class="formRow  ">
    			<div class="labelContainer"><label class="rowLabel">label_if<span class="validationMark"></span></label></div>
    				<div class="rowControl">
    					 <select id="xrule_1" name="Field"  class="">
    						<option value="">Please Select</option>
    						<option value="2">Field on</option>
    						<option value="4">Field 2</option>
    						<option value="3">Field imported on</option>
    					 </select>
          </div>
       </div>
       
       <div class="formRow .dropdownName "  style="display: none;"> 
          <div class="rowControl">
             <select id="f_1rator" name="rator">
    			<option value="">Please select</option>
    			 <option value="2">Field on</option>
                <option value="4">Field 2</option>
             </select>
          </div>
       </div>
       
       <div class="formRow .FieldName" style="display: none;">
          
    	  <input type="text" name="valuexx" class="valuexx" id="v_1"  value="" />
    	   
       </div>
    </fieldset>
    
    </div>

Answer 1

You can use this approach.

$(this).parent('fieldset').find('.FieldName').hide();
$(this).parent('fieldset').find('.dropdownName').show();