复杂的html老人和父选择器无法在任何浏览器中工作 – jquery

发布时间：2020-12-14 23:21:56 所属栏目：资源来源：网络整理

导读：我已粘贴了一个独立的 HTML代码,有助于理解.我想在更改一个下拉列表时显示隐藏两个输入字段. 我没有错. 任何人都可以告诉我什么是错的,需要修理吗？ $(document).ready(function() { $('#containerId').find('select[name="Field"]').live('change',function

我已粘贴了一个独立的 HTML代码,有助于理解.我想在更改一个下拉列表时显示隐藏两个输入字段.

我没有错.

任何人都可以告诉我什么是错的,需要修理吗？

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

解决方法

这是根据您的方案的工作示例

$(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();
    }

  });

});

删除长度检查,也修正HTML中的id和类名

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!