用f.select值填充f.hidden_​​field

Question

I am looking at how to populate a hidden_field with the value of a f.select field however I am having difficulty. I was going to use javascript but the html created from my haml makes it difficult to assign an id to the select I wish to pass the value from.

= f.select :trial, [['Yes', 'true'], ['No', 'false']], {}, :id => "free-trial", class: 'selectpicker mandatory'

This generates the following html

<div class="col-sm-4">
  <select class="selectpicker mandatory" id="free-trial" name="campaign[trial]" style="display: none;">
    <option value="true">Yes</option>
    <option value="false" selected="selected">No</option>
  </select>
  <div class="btn-group bootstrap-select mandatory">
    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" data-id="free-trial" data-original-title="" title="">
      <span class="filter-option pull-left">No</span>&nbsp;
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" style="max-height: 133px; overflow-y: auto; min-height: 0px;">
      <li rel="0">
        <a tabindex="0" class=""> 
          <span class="text">
            Yes
          </span>
          <i class="icon-ok check-mark"></i>
        </a>
      </li>
      <li rel="1" class="selected">
        <a tabindex="0" class="">
          <span class="text">No</span>
          <i class="icon-ok check-mark"></i>
        </a>
      </li>
    </ul>
  </div>
</div>

This html when display is actually two selects one hidden with the ID assigned and a second which is displayed without the id associated. As a result my clicking on the visible select means the associated jquery doesnt fire.

Answer 1

If i understood you properly, you want catch value from select to hidden_input. You can use jquery to do that:

$('#free-trial').on('change', function(){
  var val = $(this).val();
  $('#your_hidden_input').attr('value', val);
}