RoR rails，f。选择onchange of value，使html的部分可见

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选项：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，或者一旦选择no或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助手。 如果你查看文档 ，你会发现select helper接受的最后两个参数是options hash和html_options hash。 您需要在html_options哈希中传递:onchange 。 此外，Rails将默认为[model_name]_[attribute_name]作为select元素的id ，因此如果要将该字符串用作id ，则还需要在html_options哈希中传递:id => "chk_event" ：

<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>