我的HTML
<select name="one" id="one">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
....
</select>
<select name="two" id="two">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
....
</select>
<select name="three" id="three">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
....
</select>
我的JQuery
$(document).ready(function() {
if (one != 0) {
// Set select dropdown one
}
if (two != 0) {
// Set select dropdown two
}
if (three != 0) {
// Set select dropdown three
}
});
$(document).on('change', '#three', function() {
var item = $(this).val();
var url = basePath + 'item/' + item;
window.location = url;
});
PHP
<script type="text/javascript">
var one = <?= $one; ?>;
var two = <?= $two; ?>;
var two = <?= $three; ?>;
</script>
问题
我想要实现的是,当在下拉列表一中选择一个选项时,JQuery加载下拉列表二。当在下拉列表2中选择一个选项时,JQuery将加载下拉列表三。
我已经完成了。但是,当选择下拉列表三时,它会进行刷新。但一旦刷新完成,所有选择值都将被再次设置,并触发另一次刷新。
我希望JQuery只在第一次刷新时设置刷新后的所有选择值(从而触发选择下拉菜单上的更改事件并加载值(,但在设置第三个选择下拉菜单值时不刷新。
如果我需要对此做更多解释,请告诉我。欢迎提出任何建议和帮助。
进度
if (false !== rootpfgroup && false !== hoofdpfgroup && false !== subpfgroup) {
$('#one').val(rootpfgroup).trigger('change');
$('#two').val(hoofdpfgroup).trigger('change');
$('#three').val(subpfgroup);
}
我发现以下内容有效。但是,它只设置第一个下拉列表。在第一个下拉列表中选择一个值会触发一个ajax调用,该调用加载第二个下拉列表的选项。在第二个下拉列表中选择一个选项会触发一个ajax调用,该调用加载第三个选项。有人能告诉我更多关于如何处理这件事以及我做错了什么吗?提前谢谢。
根据我上面的评论,使用PHP设置所选的下拉值以设置HTML selected
属性也会起作用,消除了刷新问题,这意味着值持久性在没有JS的情况下也能起作用(你是否关心这是另一回事(:
<?php
$one = '';
$two = '';
$three = '';
if (!empty($_POST['one'])) {
$one = $_POST['one'];
}
if (!empty($_POST['two'])) {
$two = $_POST['two'];
}
if (!empty($_POST['three'])) {
$three = $_POST['three'];
}
?>
$(document).on('change', '#three', function() {
var form = $('#form');
var item = $(this).val();
var url = basePath + 'item/' + item;
form.attr('action', url);
form.submit();
});
<form action="" method="POST" id="form">
<select name="one" id="one">
<option value="1" <?php if ($one == 1):?>selected<?php endif;?>>One</option>
<option value="2" <?php if ($one == 2):?>selected<?php endif;?>>Two</option>
<option value="3" <?php if ($one == 3):?>selected<?php endif;?>>Three</option>
</select>
<select name="two" id="two">
<option value="1" <?php if ($two == 1):?>selected<?php endif;?>>One</option>
<option value="2" <?php if ($two == 2):?>selected<?php endif;?>>Two</option>
<option value="3" <?php if ($two == 3):?>selected<?php endif;?>>Three</option>
</select>
<select name="three" id="three">
<option value="1" <?php if ($three == 1):?>selected<?php endif;?>>One</option>
<option value="2" <?php if ($three == 2):?>selected<?php endif;?>>Two</option>
<option value="3" <?php if ($three == 3):?>selected<?php endif;?>>Three</option>
</select>
</form>
正如我提到的,根据数据的实际外观(假设它不仅仅是数字列表;(,您可能能够在PHP中添加一些循环以避免重复。
<?php
$one = '';
$two = '';
$three = '';
if (!empty($_POST['one'])) {
$one = $_POST['one'];
}
if (!empty($_POST['two'])) {
$two = $_POST['two'];
}
if (!empty($_POST['three'])) {
$three = $_POST['three'];
}
?>
$(document).ready(function() {
var one = '<?= $one; ?>';
var two = '<?= $two; ?>';
var three = '<?= $three; ?>';
if (one != '') {
$('#one').val(one);
}
if (two != '') {
$('#two').val(two);
}
if (three != '') {
$('#three').val(three);
}
});
$(document).on('change', '#three', function() {
var form = $('#form');
var item = $(this).val();
var url = basePath + 'item/' + item;
form.attr('action', url);
form.submit();
});
<form action="" method="POST" id="form">
<select name="one" id="one">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select name="two" id="two">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select name="three" id="three">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</form>
现在应该按预期设置值。