Question

我想找出一种做某事的方法，但很难解释。我基本上有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"
        ]
      ]
    ]
  ]
]

因此，第二个和第三个选择将被隐藏，直到选择前一个选择。在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>

因此，如果我在第一个选择中选择2015，则第二个选择将显示英语和法语。如果我然后选择英语，第三个选择将显示筹码。我最终会根据选择显示一个图像，这是通过Ajax调用完成的。

所以这很好用。现在在左侧菜单上我有一个比较链接。单击此按钮时，我需要禁用之前的直接选择

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();
});

问题是这个。我现在需要显示一个新的选择行，以便进行比较。理想情况下，我不想重复所有这些代码，这将是太多的代码。

但是，我需要这一行选择独立于原始行。

这可能吗？

由于

Answer 1

我认为你应该用容器div元素包装选择。

在这个元素上你需要放置一个id，所以你应该从select中删除id，并使用不同的东西来区分，比如特定的样式或数据集元素，或者只是name属性就可以了。

在jQuery上，你指向你的div容器来找到你的所有元素。

通过这种方式，您可以使用3选择创建所需的所有框，唯一的区别将是容器ID。

独立的选择输入行

1 个答案: