RoR rails, f.select onchange of value, making parts of html visible

Question

我是 Rails 的新手。我能够正确地让 onclick 运行 f.checkbox。

现在我正在尝试为 _form 中的 f.select 做类似的事情。

这是我的复选框工作代码 erb 部分：

<div class="row"> 
  <div class="col-md-4">
    <div class="field">
      <%= f.label :air? %>
      <%= f.check_box :air, :id => "chk_air", :onclick => "manageAirDisp();" %>
    </div>
  </div>

  <% if request.air? %>
    <div class="col-md-4", id="MultiButton", style="display: block">
  <% else %>
    <div class="col-md-4", id="MultiButton", style="display: none">
  <% end %>
      <button onclick="showAirMulti(); return false;", class="btn-custom-normal">Show/Hide Multi-Destinations</button>
    </div>
</div>

在 _frm 之上相应的脚本部分：

function manageAirDisp (){
  var checkbox = document.getElementById('chk_air');
  // this check below checks if checkbox is checked or not.
  if (checkbox.checked){
    document.getElementById("air_div").style.display = "block";
    document.getElementById("MultiButton").style.display = "block";
  } else {
    document.getElementById("air_div").style.display = "none";
    document.getElementById("MultiButton").style.display = "none";
  }

}

现在我无法使用 dorp down selection 来工作： erb 部分：

<div class="row"> 
  <div class="col-md-4">
    <div class="field">
      <%= f.label :event %>
      <!-- < f.check_box :event, :id => "chk_event", :onclick => "manageEvent();" > -->
      <%= f.select :event, [['Unkown', 'unk'], ['yes', 'yes'], ['no', 'no']], :onchange => "manageEvent();" } %>
    </div>
  </div>
</div>

<div class="row",  id="event_blk", style="display: none">
  <div class="col-md-4">
    <div class="field">
      <%= f.label :registration, "addQuestion?" %>
      <%= f.check_box :addquestion %>
    </div>
  </div>
</div>

现在是我无法开始工作的相应脚本部分：

function manageEvent(){
  var checkbox = document.getElementById('chk_event');
  // this check below checks if checkbox is checked or not.
  if (selection.val() = "yes"){
    document.getElementById("event_blk").style.display = "block";
  } else {
    document.getElementById("event_blk").style.display = "none";
  }
   // to check on value instead it should look as follows:
  // if (checkbox.val() = "something") {  then do something }

}

所以我想做的是让 event_blk 部分在用户 select "yes" 时变得可见，并且一旦他们拥有它 select ed，或者一旦 select no or unk

就让它不可见

感谢您的帮助

Answer 1

您似乎没有声明 selection -- 您正在设置变量 checkbox。

此外，您应该使用 .value 而不是 .val()。

试试这个：

function manageEvent(){

    // change checkbox to selection
    var selection = document.getElementById('chk_event');

    // changed selection.val() to selection.value
    if (selection.value == "yes"){
        document.getElementById("event_blk").style.display = "block";
    } else {
        document.getElementById("event_blk").style.display = "none";
    }
}

更新：

您还需要修复 select 助手。如果查看 documentation，您会发现 select 助手接受的最后两个参数是 options 散列和 html_options 散列。您需要在 html_options 散列中传递 :onchange。此外，Rails 将默认为 [model_name]_[attribute_name] 作为 select 元素的 id，因此您还需要在 html_options 中传递 :id => "chk_event" hash 如果您想将该字符串用作 id:

<div class="row"> 
  <div class="col-md-4">
    <div class="field">
      <%= f.label :event %>
      <!-- < f.check_box :event, :id => "chk_event", :onclick => "manageEvent();" > -->
      <%= f.select :event, 
                   [['Unkown', 'unk'], ['yes', 'yes'], ['no', 'no']],
                   {}, #empty options hash
                   { :id => "chk_event", :onchange => "manageEvent();" } %>
    </div>
  </div>
</div>

RoR rails, f.select onchange of value, making parts of html visible

RoR rails, f.select onchange of value, making portions of html visible

html

javascript

ruby-on-rails

ruby-on-rails-5