Question

新手在这里。我正在Sinatra建立一个家务清单应用程序。家务只在2天内完成;周一或周二。家务活只有两种选择：玩具和餐具。如果周一选择了家务活，我希望周二自动选择其他家务活。这是erb：

<body>
<div class ="monday">
  <h2>Monday:</h2>
  <select class="button">
    <option value="lily">Lily</option>
    <option value="sam">Sam</option>
  </select>
  <div>
    <select id="monday_chores" class="button">
      <option value="Dishes">X</option>
      <option value="Toys">O</option>
    </select>
  </div>
</div>

<div class = "Tuesday">
  <h2>Tuesday</h2>
  <select class="button">
    <option value="lily">Lily</option>
    <option value="sam">Sam</option>
  </select>
  <div>
    <select id="tuesday_chores" class="button">
      <option value="Dishes">X</option>
      <option value="Toys">O</option>
    </select>
  </div>
</div>

<div>
  <center>
    <a href="/play"><button type=button class="start_button">Start</option>
  </center>
</div>

我想通过使用JQuery实现这一目标。我正在考虑以下几点：

$(function() {
  $('#monday_chores').on ('click', function(event){
if event == Dishes
  #tuesday_chores == Toys
else
    event == Dishes
  });
});

提前致谢！

Answer 1

当第一次选择更改为Dishes：

时，这将选择Toys

$(function() {
  $('#monday_chores').on ('change', function(event){
    var $this = $(this);
      if (($this).val() == 'Dishes') {
          $('#tuesday_chores').val("Toys");
      }
  });
});

Answer 2

尝试使用change代替click，并使用

获取所选值

$(this).val();

Answer 3

试试这个......

$(function() {
  $('#monday_chores').on ('change', function(event){
      if ($(this).val() == 'Dishes') $('#tuesday_chores').val("Toys");
        else $('#tuesday_chores').val("Dishes");   // will select the non-selected option
  });
});

使用JQuery在<select>标签</select>中自动分配未选择的选项

3 个答案: