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

Question

I inserted separate HTML code to help understand. I want to show hide two input fields when changing one drop-down list.

I'm not wrong.

Can someone send me what's wrong and need to fix it?

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

Run codeHide result

Answer 1

Here is a working example according to your scenario

$(document).ready(function() {
  $('#containerId').find('select[name="Field"]').live('change', function(){


  var fieldi = $(this).val();

  if( fieldi==4) {
        $(this).closest("fieldset").find('.FieldName' ).hide();
            $(this).closest("fieldset").find('.dropdownName' ).show();
    }

    if( fieldi==2) {
            $(this).closest("fieldset").find('.FieldName' ).show();
            $(this).closest("fieldset").find('.dropdownName' ).hide();
    }

  });

});

Remove length check, and also correct identifier and class name in HTML

Answer 2

You can use this approach.

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

Answer 3

$('#containerId').find('select[name="Field"]').on('change', function(){
  var fieldi = $(this).val();

  if( fieldi == 4 ) {
    $(this).parents('fieldset').find('.dropdownName').hide();
    $(this).parents('fieldset').find('.FieldName').show();

    }

    if(fieldi == 2) {
    $(this).parents('fieldset').find('.dropdownName').show();
    $(this).parents('fieldset').find('.FieldName').hide();

    }

  });

, / "dropdownName" FieldName . JQuery.

# . html

<div id='#containerId'>, <div class="formRow .dropdownName "  style="display: none;"> and <div class="formRow .FieldName" style="display: none;">