Question

我正在努力寻找最佳解决方案：我将有类别，子类别，子子类别等，我需要在不同的选择框中使用它。示例：首先是：

<select>
    <option value="cars">Cars</option>
    <option value="electronic">Electronic</option>
    <option value="garden">Garden</option>
</select>

之后，当用户选择例如Cars时，此选择框将更改为

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

页面的概念只是页面中间的一个框，在您选择第一个类别后，此框将消失，并出现带有子类别的新框。什么是最佳解决方案以及如何在AJAX中实现？

Answer 1

我刚写了这个JSFIDDLE：http://jsfiddle.net/thauwa/xGFQN/

基本上，你要做的就是使用这样的代码：

<强> HTML

<select id="optionsSet1" class="justAnotherDropdown">
    <option value=""></option>
    <option value="cars">Cars</option>
    <option value="electronic">Electronic</option>
    <option value="garden">Garden</option>
</select>
<select id="optionsSet2" class="justAnotherDropdown"></select>
<select id="optionsSet3" class="justAnotherDropdown"></select>
<select id="optionsSet4" class="justAnotherDropdown"></select>

<强>的jQuery

$(".justAnotherDropdown").not($(".justAnotherDropdown").first()).hide(); // Hide everything but the first of the <select> tags
$(".justAnotherDropdown").change(function () { // The jQuery event handler.
    var changedID = $(this).attr('id');
    var prefixID = changedID.slice(0, -1);
    var nextIDNumber = parseInt(changedID.substr(changedID.length - 1)) + 1;
    var nextID = prefixID + nextIDNumber;
    var nextOptionsSet = "optionsSet" + nextIDNumber;
    $.ajax({
        url: 'yourPHPpage.php', // Change this to your PHP script's actual path.
        data: {
            value: $(this).val(), // Uncomment this line when using with PHP.
            id: changedID, // Uncomment this line when using with PHP.
        },
        type: "POST",
        success: function (response) {
            $("#" + changedID).hide(); // Hide the previous box.
            $("#" + nextID).html(response).show("slow"); // Drammatically show the next.
        }
    });
});

<强> PHP

    $selectedItem = $_POST['id'];
    $selectedItemValue = $_POST['value'];
    switch ($selectedItem) {
        case 'optionsSet2':
            switch ($selectedItemValue) {
                case 'Cars':
                    echo 'HTML to display the relevant `options`, properly escaped.';
                    break;
                case 'Electronic':
                    echo 'HTML to display the relevant `options`, properly escaped.';
                    break;
                case 'Garden':
                    echo 'HTML to display the relevant `options`, properly escaped.';
                    break;
            }
            break;
        case 'optionsSet3':
            /** Add more code here. **/
    }
/** This method is very inefficient, and 'strainful', compared to using JSON. **/

我希望代码不言自明。

Answer 2

Dera Geril，您正在寻找的通常被称为“级联下拉”。关于这个论点有很多页面，它实际上取决于你使用的是哪种技术。 Google可以提供数千种资源，包括教程，开源和许可代码。

指出几个问题要求自己做出更好的决策：

我是否使用任何特定的JavaScript框架？是否有专门为它开发的代码？
我是否需要来自Ajax的数据（根据您的问题，是的，但值得指出）？
即使禁用了Javascript，我是否还需要级联下拉列表？
我是否想编写自己的jQuery代码来管理我的ajax调用？我是否还需要更新选择框？

可能会考虑其他因素。

希望你觉得它很有用。

Selectbox使用jQuery / AJAX更改内容

2 个答案: