我找到了一些相关选择框的下面代码，但由于某种原因我无法添加第四个选择框 - 我可以通过html显示它但是它仍然是空的，当填充field9时也是如此。 你认为有什么理由吗？
应该有四个选择框（field6，field8，field9和field1）。 字段8应基于在field6中选择的值填充，field9基于field8选择，field1基于field9。 代码正在运行直到field9。然后我复制了代码并使用正确的引用对其进行了调整，创建了field1。但该字段未填充，下拉显示为空。
我在想这个查询最多可能是三个盒子吗？有没有办法让最后一个盒子工作？
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
<!-- ****************For State Loads Starts***************************-->
$("#field6").change(function (e){
var state =
{
'0': ['Not Available'],
'':['Select Country'],
'Z1':['AU','CH'],
}
var value = this.value;
// Access the object like city['CT'] .. That gives the Array
state[value] !== undefined ? state[value] : '0';
var stateOptions = state[value];
var $field8 = $('#field8'),
$field9 = $('#field9');
$field1 = $('#field1');
$field1.html('');
$field8.html(''); // clear the existing options
$field9.html(''); // clear the existing options
$.each(stateOptions, function (i, o) {
$('<option>' + o + '</option>').appendTo('#field8');
});// ------------>each end tag
});//----------------->on-change end tag
<!-- ****************For State Loads Ended***************************-->
<!-- ****************For type Loads Starts***************************-->
$("#field8").change(function (e){
var type =
{
'0': ['Not Available'],
'AU' : ['TEST'],
'CH' : ['TEST1'],
}
var value = this.value;
type[value] !== undefined ? type[value] : '0';
var typeOptions = type[value];
var $field9 = $('#field9');
$field9.html(''); // clear the existing options
$.each(typeOptions, function (j, k) {
$('<option>' + k + '</option>').appendTo('#field9');
});// ------------>each end tag
});//----------------->on-change end tag
<!-- ****************For type Loads Ended***************************-->
<!-- ****************For type2 Loads Starts***************************-->
$("#field9").change(function (e){
var type2 =
{
'0' : ['Not Available'],
'TEST' : ['this should appear in the fourth box'],
'TEST1' : ['this should appear in the fourth box']
}
var value = this.value;
type2[value] !== undefined ? type2[value] : '0';
var type2Options = type2[value];
var $field1 = $('#field1');
$field1.html(''); // clear the existing options
$.each(type2Options, function (j, k) {
$('<option>' + k + '</option>').appendTo('#field1');
});// ------------>each end tag
});//----------------->on-change end tag
<!-- ****************For type2 Loads Ended***************************-->
}); //-------------------->ready end tag
</script>
<div id="formElement6" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
<div class="field-wrapper" style="float: left; width: 100%; clear: both" >
<div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 0%" >
<p style="position: relative; margin: 0px; padding: 0px" class="custom-select">
<label for="Country"><b>SELECT</b></label>
<select id="field6" name="Country" style="width: 10%">
<option value="" selected="selected" >Select</option>
<option value="Z1" >FIRST</option>
</select>
</p>
</div>
</div>
</div>
<div id="formElement7" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px" >
<div class="field-wrapper" style="float: left; width: 100%; clear: both" >
<div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 2%" >
<p style="position: relative; margin: 0px; padding: 0px" >
<input id="field7" type="hidden" name="DataSource" value="" />
</p>
</div>
</div>
</div>
<div id="formElement8" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
<div class="field-wrapper" style="float: left; width: 100%; clear: both" >
<div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 0%" >
<p style="position: relative; margin: 0px; padding: 0px" class="custom-select">
<label for="state" style="font-family=PT Sans" ><b>Country</b></label>
<select id="field8" name="state" style="width: 15%">
</select>
</p>
</div>
</div>
</div>
<div id="formElement9" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
<div class="field-wrapper" style="float: left; width: 100%; clear: both" >
<div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 0%" >
<p style="position: relative; margin: 0px; padding: 0px" class="custom-select">
<label for="type"><b> Type</b></label>
<select id="field9" name="type" style="width: 15%" >
</select>
</p>
</div>
</div>
</div>
<div id="formElement10" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px" >
<div class="field-wrapper" style="float: left; width: 100%; clear: both" >
<div class="_100" style="float: left; width: 96%; margin-right: 2%; margin-left: 0%" >
<p style="position: relative; margin: 0px; padding: 0px" class="custom-select">
<label for="type2"><b>Type2 </b></label>
<select id="field1" name="type2" style="width: 40%" >
</select>
</p>
</div>
</div>
</div>
答案 0 :(得分：0)
$("#field8").change(function (e){
var type =
{
'0': ['Not Available'],
'AU' : ['TEST'],
'CH' : ['TEST1'],
}
field9有一个选项，所以函数change（）不起作用。 您可以为选择框设置默认选项。 例如：
{
'AU' : ['default','TEST'],
'CH' : ['default','TEST1'],
}