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