Question

我正在创建一个网站，并且在注册页面上，用户需要在继续之前填写他们的性别和年龄。我的代码是这样的：

<%= form_for(@user) do |f| %>
          <!--some other stuff-->

          <%= f.label :gender %>
          <%= f.select :gender, options_for_select(['M', 'F', 'N/A']), :id => "gender", :include_blank => "Please select..." %>

          <%= f.label :age %>
          <%= f.select :age, (17..75), :id => "age", :include_blank => "Please select..." %>
          <br>
          <br>
          <div class='center'>
            <%= f.submit "Save and continue", class: "btn btn-large btn-primary", :disabled => true %>
          </div>
      <% end %>
    </div>

生成的HTML：

<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" //other stuff></div>
          <label for="user_gender">Gender</label>
          <select id="user_gender" name="user[gender]"><option value="">Please select...</option>
<option value="M">M</option>
<option value="F">F</option>
<option value="N/A">N/A</option></select>

          <label for="user_age">Age</label>
          <select id="user_age" name="user[age]"><option value="">Please select...</option>
<option value="17">17</option>
// skipped this
<option value="75">75</option></select>
          <br>
          <br>
          <div class="center">
            <input class="btn btn-large btn-primary" disabled="disabled" name="commit" type="submit" value="Save and continue">
          </div>
</form>

Javascript：

$(document).ready(function () {
        $select_age = $("select#user_gender");
        $select_gender = $("select#user_age");

        var check_value = function () {
            alert("asdf");
            if ($select_gender.val() !== "" && $select_age.val() !== "") {
                $("input[name='commit']").removeAttr("disabled");
            }
        };

        $select_age.change(check_value()) // I've also tried onchange 
        $select_gender.change(check_value())
    });

每当我从下拉列表中选择一个新选项时，我都会收到一条警告，其中显示＆＃34; asdf＆＃34;。但这并没有发生。为什么呢？

Answer 1

尝试以下代码

$select_age.on("change", check_value()) // I've also tried onchange 
$select_gender.on("change", check_value())

Answer 2

尝试：

＆＃13;

let select_age, select_gender;

$(document).on('change','#gender', function(){
  select_age = $(this).val();
  $(document).on('change', '#age', function(){
    select_gender = $(this).val();
    if (select_age !== '' && select_gender !== '') {
      $("input[name='commit']").removeAttr("disabled");
    }
  });
});

＆＃13;

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
 <select id="gender" name="gender">
    <option></option>
    <option value="male">Male</option>
    <option value="female">Female</option>
  </select>
  <select id="age" name="age">
    <option></option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  
  <input type="submit" value="Send" name="commit" disabled>

＆＃13;

这是因为在您当前的代码中，您在加载页面时会验证这些选择标记的值，而不是在DOM中进行更改时，这样您就可以嵌套{的验证{1}}选择并最终检查两个#age代码的值是否为默认值为空白。

在轨道上下拉红宝石的变化事件

2 个答案: