0

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 が表示されます。したがって、ユーザーが 2 番目のドロップダウン ボックスのブール オプションを選択すると、2 番目の反復レイヤーでブール値の 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();
    } 
  }
});
4

1 に答える 1

0

実は問題は select タグの haml コードにあり、onchange イベントが正しくトリガーされませんでした。この問題は、「 onchange html オプションがブラウザに表示されない」と呼ぶことができます。

この以下の概念は、私を大いに助けてくれました。

:onchange は html_option です。select の構文は次のとおりです。

**

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

その結果、全体がダイナミックになります。

于 2012-08-06T21:25:54.180 に答える