Question

首先，我知道这一定很简单，但我不知道如何做我需要做的事情。我需要的是一个列出一系列位置的JS表格下拉列表。然后，第二个下拉菜单将显示一组选定的课程日期＆＃39;。由于所有位置都有不同的服务日期，因此第二次下拉列表需要在第一次初始选择时更改。

<select class="form-control" id="campus" name="campus" required="" title="Campus">
            <option value="AIMNAT" style="alignment-adjust:middle;" selected="selected">Select Your Nearest Location</option>
            <option value="AMA">Atlanta, GA</option>
            <option value="AMD">Dallas, TX</option>
            <option value="AMH">Houston, TX</option>
            <option value="AMI">Indianapolis, IN</option>
            <option value="AMK">Kansas City, MO</option>
            <option value="AIML">Las Vegas, NV</option>
            <option value="AMO">Orlando, FL</option>
            <option value="AMP">Philadelphia, PA</option>
            <option value="AMS">San Francisco, CA</option>
            <option value="AMN">Virginia Beach, VA</option>
            <option value="AMM">Washington, DC</option>

            </select>

我上面有我的位置表单选项，我只是不确定如何将正确的课程表安排到上面的每个位置。第二个下拉列表需要说明，＆＃34;选择您的日程安排＆＃34;然后有一个填充的日期列表，这些日期与用户选择的校园有关。作为亚特兰大的一个例子，我需要8月19日至20日，9月16日至17日和10月14日至15日。而对于达拉斯，我需要8月5日至6日。 9月9日至10日，9月9日至10日10月14日至15日16-17 21-22和11月11日至12日＆amp; 18-19。

非常感谢您的知识，见解和帮助。

Answer 1

简单地说，这就是我要做的事情：

var locations = {
    "AMA" : {
        "August 19-20",
        "September 19-20",
        "January 19-20"
    },
    "AMH" : {
        "August 19-20",
        "September 19-20",
        "January 19-20"
    },
    "AIML" : {
        "August 19-20",
        "September 19-20",
        "January 19-20"
    }
};

// when user selects a location
$('.locations-select').on('change', function() {
    // get selected option
    var location = $('.locations-select option:selected');

    // clear the pervious options for dates
    $('.dates-select').empty();

    // popluate dates
    $.each(locations[locaiton], function(idx, el) {
        $('.dates-select').append('<option value="' + idx + '">' + el + "</option>");
    })
})

还有一点解释：

您需要知道哪些时间映射到哪些位置。如果是这张地图不是静态的（我只是为了简单起见），你可能需要这样做对服务器的AJAX调用以按位置获取列表
选择位置后，清除日期选择并填充它有效日期选项。

Answer 2

var data=[
{"ID":"AMA", "ParentID":null, "value":"Atlanta, GA"},{"ID":"date", "ParentID":"AMA", "value":"August 19-20th"},
{"ID":"date", "ParentID":"AMA", "value":"September 16-17th"},{"ID":"date", "ParentID":"AMA", "value":"October 14-15th"},
{"ID":"AMD", "ParentID":null, "value":"Dallas, TX"},{"ID":"date", "ParentID":"AMD", "value":"August 5-6th"},
{"ID":"date", "ParentID":"AMD", "value":"August 12-13th"},{"ID":"date", "ParentID":"AMD", "value":"September 9-10 "},
];

将您的所有数据保存为json格式，如上所述。

现在，当选择第一个下拉列表 亚特兰大时，在json中搜索它并获取其 ID 值。现在再次搜索 parentID 与 Atlanta的ID 相同的内容。获取他们的价值并在第二次下拉列表中追加。你只需要在json中进行几个搜索操作。希望它可以帮到你。

Javascript表格下拉更改第二个下拉选项

2 个答案: