Question

我有三个带有相同选项的下拉框。现在，如果我选择一个下拉选项，那么其他两个下拉列表将永远不会包含此选项。并选择下拉值将显示为选择。

之后选择其他下拉列表，然后此选定选项将显示为select，但其他两个下拉列表将永远不会包含选项。

这是我的代码，我想实现。

<div class="col-lg-6">
  <%= f.label :area_1, class: 'col-lg-2 control-label mt10' %>
  <div class="col-lg-10">
    <%= f.select :area_1, options_for_select(industries), {:prompt => "Please select industry"}, {:class => "form-control", :id => "area_1"} %>
  </div>
  <%= f.label :area_2, class: 'col-lg-2 control-label mt20' %>
  <div class="col-lg-10 mt10" id="area_2_select">
    <%= f.select :area_2, options_for_select(industries), {:prompt => "Please select industry"}, {:class => "form-control", :id => "area_2"} %>
  </div>
  <%= f.label :area_3, class: 'col-lg-2 control-label mt20' %>
  <div class="col-lg-10 mt10">
    <%= f.select :area_3, options_for_select(industries), {:prompt => "Please select industry"}, {:class => "form-control", :id => "area_3"} %>
  </div>
</div>

在上面的代码中我添加了三个选择框，这个框值来自于像这样在helper中定义的industries方法

def industries
[
  ['Agriculture & Mining', 'Ag', 1],
  ['Business Services', 'Bs', 2],
  ['Computers & Electronics', 'Ce', 3],
  ['Consumer Services', 'Cs', 4],
  ['Education', 'Ed', 5],
]
end

然后我尝试使用像

这样的更改事件来创建函数

$( document ).on('change', '#area_1', function(){
  values = $('#area_1').val();

})

请让我知道如何解决这个问题。

提前感谢。

其他下拉列表中永远不会显示所选的下拉值

0 个答案: