Dependent Drop-Downs:根据页面加载时第一个选择的值更改第二个选择选项

时间:2010-11-07 04:48:21

标签: jquery

我已经使这段代码根据第一个选择的内容动态更改第二个选择。它工作但它不适用于页面加载。脚本所在的页面正在接收从上一页的表单发布的值;在页面加载的第一个选择上选择该值,但是当发生这种情况时,第二个选择不会改变。 希望有人能够理解这个问题并帮助我。

代码:

<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” - &gt;这是第一个选择的ID

“#CustomFields_20_1” - &gt;这是第二个选择的ID

正如您所看到的,在页面加载时#CustomFields_21_1获取来自上一页的POST形式的值。现在,select#CustomFields_20_1的选项是基于#CustomFields_21_1更改动态构建的。 我想要做的是在页面加载时动态更改#CustomFields_20_1的选项,这取决于#CustomFields_21_1(从表单POST发布的值)的值,因此无需用户交互。

希望有人可以帮助这个菜鸟

这里是选择:

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

1 个答案:

答案 0 :(得分:0)

您需要强制执行附加到第一个选择的“更改”功能。进行尽可能少的更改(您可能希望缓存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>