設定入力値 - 私はそうのようHAMLいるHAML

Question

と問題：

.form-group 
    .col-sm-3.control-label 
    = f.label :trial, "Free Trial Offered" 
    %span.tipsy{"data-toggle" => "tooltip", title: t("campaigns.services_form_free_trial_help")} 
     = link_to content_tag(:i, "", class: 'glyphicon glyphicon-question-sign'), '#' 
    .col-sm-4 
    = f.select :trial, [['Yes', 'true'], ['No', 'false']], {}, class: 'selectpicker mandatory' 

これは、次のHTML作成：あなたは簡単なドロップダウンが作成されないように

<div class="form-group"> 
    <div class="col-sm-3 control-label"> 
    <label for="campaign_trial">Free Trial Offered</label> 
    <span class="tipsy" data-toggle="tooltip" title="" data-original-title="Select whether or not you wish to offer a free trial with your service."> 
     <a href="#"><i class="glyphicon glyphicon-question-sign"></i></a> 
    </span> 
    </div> 
    <div class="col-sm-4"> 
    <select class="selectpicker mandatory" id="campaign_trial" name="campaign[trial]" style="display: none;"> 
     <option value="true" selected="selected">Yes</option> 
     <option value="false">No</option> 
    </select> 
    <div class="btn-group bootstrap-select mandatory"> 
     <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" data-id="campaign_trial" data-original-title="" title=""> 
     <span class="filter-option pull-left"> 
      Yes 
     </span>&nbsp; 
     <span class="caret"> 
     </span> 
     </button> 
     <ul class="dropdown-menu" role="menu" style="max-height: 89px; overflow-y: auto; min-height: 0px;"> 
     <li rel="0" class="selected"> 
      <a tabindex="0" class=""> 
      <span class="text"> 
       Yes 
      </span> 
      <i class="icon-ok check-mark"></i> 
      </a> 
     </li> 
     <li rel="1" class=""> 
      <a tabindex="0" class=""> 
      <span class="text"> 
       No 
      </span> 
      <i class="icon-ok check-mark"></i> 
      </a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 

をが、ボタンとドロップダウンの複雑な組み合わせです。上記の値に別の入力フィールドを設定できるようにしたいのですが、jqueryの変更ハンドラなどの典型的な手法は、idなどを使用してドロップダウンの変更時期を特定することはできません。どのように私はこれを達成することができる人は助言することができます。

私はまた、2つのモデル属性を1つのドロップダウンに関連付けることを考えていました。そのため、どちらも選択肢に基づいて同じ値に設定されていますが、これが可能かどうかはわかりません。

Answer 1

bootstrap-selectを使用しているようですが、これはこのライブラリが生成したコードであり、HAMLとは関係ありません。

それはエキストラの多くを生成していても、あなたはまだ通常通り変更イベントを使用することができます。

$(function() { 
    $('#campaign_trial').on('change', function() { 
    // do things 
    }); 
})