Question

我刚才问了一个类似的问题，但意识到我的做法是错误的。我有一个数据数组，如果需要可以使它成为json数据。数据如下所示

array:4 [▼
  "data" => array:2 [▼
    2015 => array:2 [▼
      "english" => array:1 [▼
        "chips" => array:1 [▼
          0 => "img1.png"
        ]
      ]
      "french" => array:1 [▼
        "mussles" => array:1 [▼
          0 => "img1.png"
        ]
      ]
    ]
    2016 => array:2 [▼
      "indian" => array:1 [▼
        "madras" => array:1 [▼
          0 => "img1.png"
        ]
      ]
      "italien" => array:1 [▼
        "pasta" => array:1 [▼
          0 => "img1.png"
        ]
      ]
    ]
  ]
]

结构非常标准，年份＆gt;国家＆gt;菜单＆gt;图片。在我的视图中，我有一个显示年份的选择输入。

<select id="yearSelection" class="selectpicker form-control">
    @foreach($fileData["data"] as $year => $country)
        <option value="{{ $year }}">{{ $year }}</option>
    @endforeach
</select>

根据选定的年份，我需要显示第二个选项，显示可用的国家/地区。因此，如果他们选择2015年，下一个选择选项应显示英语和法语。所以，我将使用Ajax。目前我有以下

$('#yearSelection').change(function() {
    var selectedYear = $("#yearSelection option:selected").val();

    $.ajax({
        type: "POST",
        url: "./productChoices",
        data: { year : selectedYear }
    }).done(function(data){

    });
});

它不多，但它是一个开始。所以在我的控制器中，我现在可以访问年份，这将给我选定的年份。然后我计划将html传回给下一个选择输入。

我的问题是这个。在html中，你可以看到我的select是从foreach循环创建的，循环数组$ fileData。当我做出选择时，我需要传递我正在做的选定年份，但我还需要传递$ fileData数组，以便我可以计算出我需要在下一个选择中显示哪些数据，这将在我的控制器。那么我怎样才能传递$ fileData和Ajax请求。它不是一个HTML元素，所以我不太清楚如何。

由于

Answer 1

如果你的数据集不是很大，你可以100％没有ajax，并且用户响应最快。

1st：使用所有可用选项进行三次选择。在这里，我迭代你的数组来绘制选项，并添加了一些将由javascript使用的“过滤器”类。

<select id="year" class="form-control">
    @foreach($fileData["data"] as $year => $countries)
        <option value="{{ $year }}">{{ $year }}</option>
    @endforeach
</select>

<select id="country" class="form-control hide">
    @foreach($fileData["data"] as $year => $countries)
    @foreach ($countries as $country => $dishes)
            <option class="year-{{ $year }} hide" value="{{ $country }}">{{ $country }}</option>
        @endforeach
    @endforeach
</select>

<select id="dish" class="form-control hide">
    @foreach($fileData["data"] as $year => $countries)
        @foreach ($countries as $country => $dishes)
            @foreach ($dishes as $dish => $images)
                <option class="year-{{ $year }} country-{{ $country }} hide" value="{{ $dish }}">{{ $dish }}</option>
            @endforeach
        @endforeach
    @endforeach
</select>

第2代：在Javascript：

var getSelectedYear = function() {
    return $("#year option:selected").val();
}

var getSelectedCountry = function() {
    return $("#country option:selected").val();
}

$('#year').change(function() {
    $("#country option.year-" + getSelectedYear()).removeClass('hide');
    $("#country").removeClass('hide');
})

$('#country').change(function() {
    $("#dish option.year-" + getSelectedYear() + ".country-" + getSelectedCountry()).removeClass('hide');
    $("#dish").removeClass('hide');
})

$('#dish').change(function() {
    // Do what you want with the selected dish, you didn't specified if you want to show the images somewhere.
})

请注意，此代码不完整，您需要在更改上一个选择时将所有内容重置为原始状态，并且我对您的图片没有任何内容。

Answer 2

当您从ajax电话中获得年份时，您可以从阵列中选择该年份。假设您已经过了2015年。现在您执行以下操作：

$year = '2015'; // got from ajax
$country = $data[$year];

现在您的$ country将包含以下数据：

array:2 [▼
      "english" => array:1 [▼
        "chips" => array:1 [▼
          0 => "img1.png"
        ]
      ]
      "french" => array:1 [▼
        "mussles" => array:1 [▼
          0 => "img1.png"
        ]
      ]
    ]

现在你必须将$ country从ajax调用作为json数据返回并将它们添加到你的下一个select输入中。假设您选择了元素ID作为国家/地区，因此您可以添加国家/地区列表，如下所示：

var selectValues = data; // country list got from your controller
$.each(selectValues, function(key, value) {   
     $('#countries')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(key)); // option value and text, both will be country.  
});

我希望有帮助

基于先前选择的动态选择选项

2 个答案: