Question

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

代码：

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

Answer 1

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

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

1 个答案: