Question

我尝试用jQuery连接选择3个选项，我在第三个选择时遇到了麻烦。我不明白为什么doesen不采取城市价值，它出现在选择箭头而不是选择。

这里是我的jQuery代码：

$(document).ready(function () {

//Initializing arrays with city names
var USA = [
    {display: "Washington, D.C.", value: "WashingtonDC"},
    {display: "Alaska", value: "Alaska"},
    {display: "New York", value: "New-York"},
    {display: "Florida", value: "Florida"},
    {display: "Hawaii", value: "Hawaii"},
    {display: "California", value: "California"}];

var AUSTRALIA = [
    {display: "Canberra", value: "Canberra"},
    {display: "Sydney", value: "Sydney"},
    {display: "Melbourne", value: "Melbourne"},
    {display: "Perth", value: "Perth"},
    {display: "Gold Coast ", value: "Gold-Coast"}];

var FRANCE = [
    {display: "Paris", value: "Paris"},
    {display: "Avignon", value: "Avignon"},
    {display: "Strasbourg", value: "Strasbourg"},
    {display: "Nice", value: "Nice"}];

//REGION

//Function executes on change of first select option field 
$("#country").change(function () {

    var select = $("#country option:selected").val();

    switch (select) {
        case "USA":
            city(USA);
            break;

        case "AUSTRALIA":
            city(AUSTRALIA);
            break;

        case "FRANCE":
            city(FRANCE);
            break;

        default:
            $("#city").empty();
            $("#city").append("<option>--Select--</option>");
            break;
    }
});

var ONE = [
    {display: "One", value: "One2"},
    {display: "Two", value: "Two2"}];

var TWO = [
    {display: "Three", value: "Three2"},
    {display: "Four", value: "Four2"}];

var THREE = [
    {display: "Five", value: "Five2"},
    {display: "Six", value: "Six2"}];


//Function executes on change of second select option field 
$("#city").change(function () {

    var select = $("#city option:selected").val();

    switch (select) {
        case "ONE":
            region(ONE);
            break;

        case "TWO":
            region(TWO);
            break;

        case "THREE":
            region(THREE);
            break;

        default:
            $("#region").empty();
            $("#region").append("<option>--Select--</option>");
            break;
    }
});

//Function To List out Cities in Second Select tags
function city(arr) {
    $("#city").empty();//To reset cities
    $("#city").append("<option>--Select--</option>");
    $(arr).each(function (i) {//to list cities
        $("#city").append("<option value=\"" + arr[i].value + "\">" + arr[i].display + "    </option>")
    });
}

    //Function To List out Cities in Second Select tags
function region(arr) {
    $("#region").empty();//To reset cities
    $("#region").append("<option>--Select--</option>");
    $(arr).each(function (i) {//to list cities
        $("#region").append("<option value=\"" + arr[i].value + "\">" + arr[i].display + "    </option>")
    });
}
});

第三个选择doesen采取对象，有人知道为什么？感谢

JSFIDDLE

Answer 1

问题在于： Wrong Value Switching

从您所看到的，您为switch语句提供了错误的值，因此代码没有执行。

Answer 2

您只有ONE TWO和THREE。它们都不是匹配的城市名称。我想你只是忘了将它们设置为正确的值而不是占位符。

Answer 3

您正在阅读city值以显示区域。

您的代码假定city值为ONE，TWO或THREE，但它永远不会。

因此，您始终会应用default城市值。

Answer 4

从我可以看到失败的选择必须是#region，因为城市功能#city将填充城市名称，如尼斯，巴黎等等

 $('#city').change()

运行它将始终输入默认值，因为Nice和Paris以及第一个数组中指定的其他值都不是＆＃39; ONE＆＃39;，＆＃39; TWO＆＃39;或者＆＃39; THREE＆＃39;。

我不明白你对各个地区和城市的意图，因为每个国家都有某些城市，但不是每个城市的某些地区，你的逻辑是有缺陷的，不要担心它的共同但是你必须要考虑它通过并注意你正在做的事情。

要了解更好的添加$（＆＃39; #city＆＃39;）。change（）一个console.log（select）;运行它并检查您的控制台，您将看到第二个选择的值永远不会是＆＃34; ONE＆＃34;，＆＃39; TWO＆＃39;或者＆＃39;三＆＃39;因此将始终在默认声明的基础上创建一个空的选择

jQuery依赖选择选项

4 个答案: