Question

我在同一页面中有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/

我使用followin 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>

进行选择后，将提交选择。不幸的是，在选择之后的几毫秒内，表单被提交并且选择失去了它的集中化。我尝试了很多方法来解决它，但我似乎无法管理。

使用PHP和PDO填充html选项。

Answer 1

我看到你要去的两条路线：

提交表单（重新加载页面），在项目上以HTML格式设置所选属性并再次触发中心脚本（无论如何，您需要在页面加载时执行此操作）
或者在提交时使用jQuery的$.post()和$().serialize()来保存结果（将其发送到php脚本）并保持选择不变（无页面重新加载）

如果您显示页面，我希望第二个选项提交，第一个需要。

$(document).ready(function() {
  $('#PrimaryCatForm, #SecondaryCatForm, #TertiaryCatForm').on('change', function() {
    $.post(document.location.href, $(this).serialize()).success(function() {
       alert('saved');
    });
  });
});

Answer 2

您需要在元素change和页面load上调用中心函数：

$(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);
        });

});

Updated fiddle

Answer 3

这个jQuery小提琴将告诉你如何： JS FIDDLE

一旦文档准备就绪，它将选择列表的第一个值，在我的示例中为1，并自动显示第二个列表。

＆＃39; getTheValueIntoPHP文件＆＃39;，用它来获取PHP文件返回的数据，你可以使用.html（）来填充select html标签。

重新选择第一个列表后，如果第三个列表可见，它将隐藏第三个列表，并自动调用函数＆＃39; getTheValueIntoPHPfile＆＃39;获取数据并重新填充第二个列表。

$(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
}

仅在表单提交一次后，jQuery才会加载一个函数

3 个答案: