我想找出一种做某事的方法,但很难解释。我基本上有 4 个动态选择输入。每当有一个选项 选择后,将触发 ajax 调用。这就是它的工作原理。我有以下数据集
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"
]
]
]
]
]
为了正确显示正确的数据,我做了以下操作
<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>
所以第二个和第三个选择是隐藏的,直到选择了前一个。 在 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() {
triggerImageChange();
});
因此,如果我在第一次选择中选择 2015,第二次选择将显示英语和法语。如果我然后选择英语,第三个选择将显示筹码。我最终根据选择显示图像,这是通过 Ajax 调用完成的。
所以这很好用。现在在左侧菜单上我有一个比较链接。单击此按钮后,我需要禁用之前的直接选择
$('#comparison').click(function (event) {
event.preventDefault();
$('#year, #country, #dish').prop('disabled', true);
});
问题是这样的。我现在需要显示新的一行选择,以便进行比较。理想情况下,我不想重复所有这些代码,那样代码太多了。
但是,我需要这一行选择独立于原始行。
这可能吗?
谢谢
最佳答案
我认为您应该用容器 div 元素包装选择。
在这个元素上你需要放置一个id,所以你应该从选择中删除id,并使用不同的东西来区分,比如特定的样式或数据集元素或者只是name属性就可以了。
在 jQuery 上,您指向您的 div 容器以查找所有元素。
通过这种方式,您可以使用 3 个选择创建您需要的所有框,唯一的区别是容器 ID。
关于javascript - 选择输入的独立行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38793439/