使用 JQuery 在 <select> 标记中自动分配未选择的选项答案

【问题标题】：Using JQuery to Automatically Assign Unpicked Option in <select> tag使用 JQuery 在 <select> 标记中自动分配未选择的选项
【发布时间】：2014-02-04 18:51:57
【问题描述】：

这里是新手。我正在 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
  });
});

提前致谢！

【问题讨论】：

标签： javascript jquery html sinatra

【解决方案1】：

当第一次选择更改为菜肴时，这将选择玩具：

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

【讨论】：

感谢您的帮助！我最终使用了 if else 语句来确保无论第一个家务是什么，都会自动选择第二个家务。因此，为了扩展您的解决方案，我想出了： $(function() { $('#monday_chores').on ('change', function(event){ var $this = $(this); if (($this ).val() == "Dishes") { $('#tuesday_chores').val("Toys"); } else{ $('#tuesday_chores').val("Dishes"); } }); } );

【解决方案2】：

尝试使用change 而不是click，并获取所选值使用

$(this).val();

【讨论】：

【解决方案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
  });
});

【讨论】：