我已粘贴了一个独立的
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和类名
