使用jQuery/AJAX改变选择框的内容

Selectbox change content using jQuery/AJAX

本文关键字：选择 改变 jQuery AJAX 使用      更新时间：2023-09-26

我正试图找到最好的解决方案:我将有类别，子类别，子类别等，我需要在不同的选择框。示例:首先是:

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

之后，当用户选择汽车时，这个选择框会变为

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

页面的概念只是页面中间的一个框，当你选择第一个类别后，这个框将消失，并出现新的子类别框。最好的解决方案是什么?如何在AJAX中实现?

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

基本上，你要做的就是使用一些像这样的代码:

<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. **/

Geril，你正在寻找的通常被称为"级联下拉菜单"。关于这个论点有很多页，这取决于你使用的是哪种技术。在谷歌上搜索成千上万的资源，包括教程、开源和许可代码。

指出几个问题来问自己更好的决策:

  1. 我是否使用任何特定的javascript框架?有专门为它开发的代码吗?
  2. 我需要来自Ajax的数据吗(根据你的问题，是的，但值得指出来)?
  3. 我需要级联下拉工作，即使禁用Javascript ?
    4. 我想写我自己的jQuery代码来管理我的ajax调用吗?除了更新选择框之外，我还需要什么吗?

可能还有其他考虑。

相关文章：