5

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>

1
  • use closest(selector) instead of parent i.e. $(this).closest('fieldset').find('div.formRow' ) and remove . from css class in the HTML class attribute
    – Satpal
    Feb 21, 2018 at 12:33

3 Answers 3

5

You can use this approach.

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

Here is 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, also correct id and class name in HTML

2
$('#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();

    }

  });

Yeah as per my understanding you want to show/hide the closest input field with classes "dropdownName" and FieldName on the base of first dropdown select. so simply you can simple show hide by Jquery selector.

First you have to delete the # and . from the html tags

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.