我在同一页面中有 3 个 HTML 格式的列表。当选择一个选项时，它被提交，并根据第一个列表中的选择，填充第二个列表，然后根据第二个列表的选择填充第三个列表。
每次做出选择时，都会提交表格。这是使用以下与 HTML 表单相关的代码完成的：
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" >
//Auto submit form
$(document).ready(function() {
$('#PrimaryCatForm, #SecondaryCatForm, #TertiaryCatForm').on('change', function() {
$(this).submit();
});
});
</script>
每次进行选择时，我都有另一个jquery来集中选择，类似于这个 - http://jsfiddle.net/BA39h/1/
我使用以下的jQuery
<script type="text/javascript" >
$(document).ready(function() {
$('#primary_cat_select, #secondary_cat_select, #tertiary_cat_select').on('change', function(){
var n = this.getAttribute('size'),
i = this.selectedIndex,
l = this.options.length;
this.selectedIndex = Math.min(l-1,i+n/2|0);
this.selectedIndex = Math.max(0,i+1-n/2|0);
this.selectedIndex = i;
})
});
</script>
进行选择后，将提交选择。不幸的是，在选择居中后的几毫秒内，表单被提交，选择失去了集中性。我尝试了很多方法来解决它，但我似乎没有管理。
html选项是使用PHP和PDO填充的。
您需要在元素change和第 load 页上调用 center 函数：
$(document).ready(function () {
// put it into a reusable function
function centreSelected(el) {
var n = this.getAttribute('size'),
i = this.selectedIndex,
l = this.options.length;
this.selectedIndex = Math.min(l - 1, i + n / 2 | 0);
this.selectedIndex = Math.max(0, i + 1 - n / 2 | 0);
this.selectedIndex = i;
}
$('#primary_cat_select, #secondary_cat_select, #tertiary_cat_select')
// bind the change event
.on('change', centreSelected)
// apply it to the element now
.each(function () {
centreSelected.apply(this);
});
});
更新的小提琴
我看到 2 条路线供您选择：
- 要么提交表单（重新加载页面），在项目上设置HTML中的选定属性，然后再次触发中心脚本（无论如何，您需要在页面加载时执行的操作）
- 或者在提交时使用jQuery的
$.post()和$().serialize()，只需保存结果（将其发送到php脚本）并保持选择不变（不重新加载页面）
我更喜欢第二个提交选项，如果您显示页面，则需要第一个选项.
$(document).ready(function() {
$('#PrimaryCatForm, #SecondaryCatForm, #TertiaryCatForm').on('change', function() {
$.post(document.location.href, $(this).serialize()).success(function() {
alert('saved');
});
});
});
这个jQuery小提琴将告诉你如何：JS 小提琴
文档准备就绪后，它将选择列表的第一个值，在我的示例中为 1，并自动显示第二个列表。
'getTheValueIntoPHPfile'，使用它来获取PHP文件返回的数据，你可以使用.html（）来填充选择的html标签。
重新选择第一个列表后，它将隐藏第三个列表（如果它可见），并自动调用函数"getTheValueIntoPHPfile"来获取数据并重新填充第二个列表。
$(document).ready(function(){
$('select.select').on('change', function(){
var self = $(this),
value = self.val(), // selected value
dataType = self.data('type'); // Select type (1st, 2nd and 3rd)
// Hide select third if change the first
if (dataType == 1 && !$('.second').hasClass('hide') && !$('.third').hasClass('hide'))
{
$('.third').addClass('hide');
// Show second select if hidden
} else if (dataType == 1 && $('.second').hasClass('hide')) {
$('.second').removeClass('hide');
// Show third select if hidden
} else if(dataType == 2 && $('.third').hasClass('hide')) {
$('.third').removeClass('hide');
}
// function to call to get the values from php
var valueText = getTheValueIntoPHPfile(value, dataType);
$('p.result').html(valueText);
})
// On page load automatic select the first option value of the first select
var f = $('select.first option:first-child');
f.val(f.val()).trigger('change');
});
function getTheValueIntoPHPfile(value, dataType)
{
return 'Value: ' + value +
'<br/>Select Type: ' + dataType;
// Put your jquery request to PHP here and return the values to the next select
}