Dependent Drop-Downs:根据页面加载中第一个选择的值更改第二个选择选项
问题描述:
我使此代码根据第一个选择的内容动态更改第二个选择。它的工作原理,但它不适合页面加载。脚本所在的页面正在接收从前一页上的表单发布的值;该值是在页面加载的第一次选择时选择的,但是当发生这种情况时,第二次选择不会改变。 希望有人能够理解这个问题并帮助我。Dependent Drop-Downs:根据页面加载中第一个选择的值更改第二个选择选项
的代码:
<script type="text/javascript">
$(document).ready(function(){
$('#CustomFields_21_1').val('<?php echo $_POST['secondform']; ?>')
$('#CustomFields_21_1').change(function() {
var options = '';
if($(this).val() == 'a') {
options = '<option value="">-- Seleccione una versión --</option><option value="1">1</option><option value="2">2</option><option value="3">3</option>';
}
else if ($(this).val() == 'b'){
options = '<option value="4">4</option><option value="5">5</option>';
}
else if ($(this).val() == 'c'){
options = '<option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option>';
}
$('#CustomFields_20_1').html(options);
});
});
</script>
“#CustomFields_21_1” - >这是对的ID第一选择
“#CustomFields_20_1” - >这是第二个的ID选择
如您所见,在页面加载时#CustomFields_21_1采用来自上一页的POST表单的值。现在,选择#CustomFields_20_1的选项是基于#CustomFields_21_1更改动态构建的。 我想要做的是在页面加载时根据采用#CustomFields_21_1(从POST形式发布的值)的值动态更改#CustomFields_20_1的选项,因此无需用户交互。
希望有人可以帮帮忙这个小白
这里的选择:
<select name="CustomFields[21]" id="CustomFields_21_1"><option selected="selected">-- Seleccione un modelo --</option><option value="a">a</option><option value="b">b</option> <option value="c">c</option></select>
<select name="CustomFields[20]" id="CustomFields_20_1"><option selected="selected">-- Selecciona una versión --</option></select>
答
您需要强制您连接到您的第一选择要执行的“变”功能。尽可能少地做出改变(你可能想缓存你的jQuery对象)。
将这个作为最后一行的$(document).ready
内:
$('#CustomFields_21_1').trigger('change');
即:
<script type="text/javascript">
$(document).ready(function(){
$('#CustomFields_21_1').val('<?php echo $_POST['secondform']; ?>')
$('#CustomFields_21_1').change(function() {
var options = '';
if($(this).val() == 'a') {
options = '<option value="">-- Seleccione una versión --</option><option value="1">1</option><option value="2">2</option><option value="3">3</option>';
}
else if ($(this).val() == 'b'){
options = '<option value="4">4</option><option value="5">5</option>';
}
else if ($(this).val() == 'c'){
options = '<option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option>';
}
$('#CustomFields_20_1').html(options);
});
$('#CustomFields_21_1').trigger('change');
});
</script>
我认为你需要制定出您的要求好一点。例如,如果表单元素x的值为y,则将表单元素a设置为值b。将其分解为最简单的部分。如果你花时间解决方案将变得像你记录的部分一样简单。 – Scott 2010-11-07 05:04:48