显示下拉菜单

Question

的/隐藏DIV的onchange我使用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是迭代值在表格的下拉菜单中的代码。 我在这里要做的是，上面的代码是在一个循环中。每个循环都有一个带有选定值的下拉菜单。当用户选择布尔或多选择选项时，它会向他显示相应的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默认为隐藏。如果用户选择“drop-down-box2”的“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(); 
    } 
    } 
}); 

Answer 1

其实这个问题是在选择标签的HAML代码，没有正确触发onchange事件。我们可以将此问题称为“onchange html选项未出现在浏览器中”。

这下面的概念帮了我很多。

：onchange是一个html_option。下面是选择语法：

**

选择（对象，方法的选择，选择= {}，html_options = {}）

**

所以在我的情况：

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

其结果是整个事情变得充满活力。