Javascript select输入的独立行

我正在想办法做某事，但很难解释。我基本上有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>

因此，如果我在第一个选择中选择2015，第二个选择将显示英语和法语。如果我选择英语，第三个选项将显示chips。我最终显示了一个基于选择的图像，这是通过Ajax调用完成的

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

$('#comparison').click(function (event) {
    event.preventDefault();

    $('#year, #country, #dish').prop('disabled', true);
});

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

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

这可能吗

---

谢谢

我认为您应该用container div元素包装selects

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

在jQuery上，指向div容器以查找所有元素

通过这种方式，您可以使用3个select创建所需的所有框，唯一的区别是容器id

$('#comparison').click(function (event) {
    event.preventDefault();

    $('#year, #country, #dish').prop('disabled', true);
});