我在下面粘贴了一个独立的 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>
最佳答案
您可以使用这种方法。
$(this).parent('fieldset').find('.FieldName').hide();
$(this).parent('fieldset').find('.dropdownName').show();
关于jquery - 复杂的 html 老年人和父选择器在任何浏览器中都不起作用 - jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48906022/