Question

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

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

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

其余的选择列表将按顺序填充。

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

我正在

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

而不是

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

我尝试将'.$row['name'].'切换为'.$row['id'].

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

先谢谢你提供有关此问题的任何帮助。

Answer 1

您提到的行为是正常的，因为提交表单会自动发送所选选项的值而不是文本。您提到的开关（'.$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/

希望有所帮助！

使用jQuery，PHP和SQL的可靠下拉菜单

1 个答案: