1

这个周末我一直在尝试使用这个脚本来创建可靠的菜单。

它由一个包含三行的 sql 表组成：“ID、Master、Name” 它稍后会抓取包含 0 作为“master”的条目，并将使用结果数据填充第一个选项列表

为了从数据库中填充下一个选择列表，它使用了以下 JS 和 php 的组合：

其余的选择列表将相应地填充。

我遇到的问题是，在它填充选择列表后，我想让网站的访问者点击搜索按钮以根据收集的数据执行搜索。问题是，当我提交表单时，它会发送存储在数据库“主”行中的信息，而不是“名称”上的信息

我越来越

index.php?genre=1&fruit=37&colour=39

代替

index.php?genre=Male&fruit=Strawberry&colour=Red

我试图切换'.$row['name'].'到'.$row['id'].

但那是不行的，我也尝试只使用'.$row['id']。它只是弄乱了表格。无论如何我可以完成我正在寻找的东西，以便我可以将字段上选择的值发送到 url？

在此先感谢您对此提供的任何帮助。

4

1 回答 1

0

您提到的行为是正常的，因为提交表单会自动发送所选选项的值而不是文本。您提到的开关 ( '.$row['name'].' to '.$row['id'].) 应该可以正常工作。如果它弄乱了表格，请提供更多信息，说明您弄乱表格的含义。

否则，这是一个可能的解决方案。这不是最优雅的解决方案，可能最适合不需要进一步复杂性但基本上生成查询字符串并手动重定向的简单表单。这是基于您在http://www.ssdtutorials.com/tutorials/series/dependable-dropdown.html链接到的原始示例。

JS：

var formObject = {
        run: function (obj) {
            obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
            var id = obj.attr('id');
            var v = obj.val();
            jQuery.getJSON('http://jquery-dependable-dropdown.ssdtutorials.com/mod/update.php', {
                id: id,
                value: v
            }, function (data) {
                if (!data.error) {
                    obj.next('.update').html(data.list).removeAttr('disabled');
                } else {
                    obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
                }
            });
        }
    };
    $(function () {

        $('.update').live('change', function () {
            formObject.run($(this));
        });

        $('#submitButton').click(function () {
            window.location.href = 'test.php?gender=' + $('#gender').find(':selected').text() + '&category=' + $('#category').find(':selected').text() + '&colour=' + $('#colour').find(':selected').text();
        });

    });

HTML：

<div id="wrapper">
<form id="theForm" action="" method="post">
    <select name="gender" id="gender" class="update">
        <option value="">Select one</option>
        <option value="1">Male</option>
        <option value="2">Female</option>
    </select>
    <select name="category" id="category" class="update" disabled="disabled">
        <option value="">----</option>
    </select>
    <select name="colour" id="colour" class="update" disabled="disabled">
        <option value="">----</option>
    </select>
    <input type="button" id="submitButton" value="submit">
</form>

http://jsfiddle.net/BUJnf/1/

希望那有所帮助！

于 2013-02-22T03:15:57.553 回答