Javascript 更改下拉菜单后显示/隐藏div

我有一个使用haml格式的下拉菜单的代码

= f.select :contact_type, options_for_select(['String','Email','Phone','Textarea','Boolean', 'Multi Select'],
 selected: @contact_object.contact_type), onchange: "showDiv(this, @i)"
- if @contact_object.contact_type == 'Boolean'
  %div{:id=>"options_for_boolean_#{@i}"}
    %li
      =f.label :first_boolean_option do
        Field
        %span{:class => "item-number"}
          =@i
        First opt.
      =f.text_field :first_boolean_option, :placeholder => "Enter First option:"
    %li
      =f.label :second_boolean_option do
        Field
        %span{:class => "item-number"}
          =@i
        First opt.
      =f.text_field :second_boolean_option, :placeholder => "Enter Second option:"
- if @contact_object.contact_type == 'Multi Select'    
  %div{:id=>"options_for_multiselect_#{@i}"}
    %li
      =f.label :multiselect_options do
        Field
        %span{:class => "item-number"}
          =@i
        Multiselect opt.
      =f.text_area :multiselect_options, :placeholder => "Enter all options separated with comma:"

这里@i是迭代器值。 我在这里要做的是，上面的代码在一个循环中。每个循环都有一个带有选定值的下拉菜单。当用户选择Boolean或Multi-select选项时，它将显示其各自的div以了解更多详细信息。所以，若用户选择第二个下拉框的布尔值选项，它应该在第二个迭代层中显示布尔值的div。困惑的这里有更简单的解释

drop-down-box1
  div1 for boolean
  div1 for multi select

drop-down-box2
  div2 for boolean
  div2 for multi select

drop-down-box3
  div3 for boolean
  div3 for multi select

*默认情况下，所有div都是隐藏的。如果用户选择“下拉框2”中的“boolean”，则应显示“div2 for boolean” 怎么做

到目前为止，我的jQuery代码是

:javascript
$(document).ready(function() {
  function showDiv(changing,numb) {
    var sel_val = changing.options[changing.selectedIndex].val();
    if (sel_val == 'Boolean') {
      $('#options_for_boolean_' + numb).show();
    } else if (sel_val == 'Multi Select') {
        $('#options_for_multiselect_' + numb).show();
    } else {
        $('#options_for_boolean_' + numb ).hide();
        $('#options_for_multiselect_'+ numb).hide();
    } 
  }
});

---

实际上，问题出在select标记的haml代码中，onchange事件没有正确触发。我们可以将此问题称为“浏览器中未出现更改html选项”

下面这个概念对我帮助很大

：onchange是一个html\u选项。以下是select的语法：

**

选择（对象、方法、选项、选项={}，html_选项={}）

**

就我而言：

= f.select :contact_type, options_for_select(['String','Email','Phone','Textarea','Boolean', 'Multi Select'], selected: @contact_object.contact_type),{},
  :onchange => "showDiv(#{@i});"

请注意，其中的空哈希表示选项。 此外，我将javascript代码更改为以下内容

:javascript
$(document).ready(function() {
  function showDiv(numb) {
    var sel_val = $('#userservicepage_contactsettings_attributes_' + numb + '_contact_type').val();
    if (sel_val == "Boolean") {
      $('#options_for_boolean_' + numb).show();
    } else if (sel_val == "Multi Select") {
      $('#options_for_multiselect_' + numb).show();
    } else {
      $('#options_for_boolean_' + numb ).hide();
      $('#options_for_multiselect_'+ numb).hide();
    }
  }
});

---

因此，整个过程变得动态。

您可以发布实际输出的HTML吗？我对HAMLOk不太流利，我对我的问题给出了一个更简单的解释，请解决它。我想要的是，当用户选择第一个下拉框中的“taffy”时，应该显示div#for_taffy_1，同样当用户选择第二个下拉框中的“taffy”时，应该显示div#for_taffy_2，如何在jquery或javascript中实现这一点*NB：我只给出了两个集合。这是一个循环，所以可以有很多