如果复选框处于选中状态，则为下拉列表设置不同的值

Question

我有一个像这样的下拉列表：

<input type="checkbox" name="checkbox" id="checkbox">
<select name="test">
<option>very good</option>
<option>nice</option>
<option>not bad</option>
<option>bad</option>
</select>

我想要复选框是否显示“不错”和“差”的值，或者复选框是否未显示“很好”和“很好”的值。 另一方面，通过更改复选框值来更改下拉列表的值。 有什么办法解决这个问题？

Answer 1

你可以设置你的HTML页面像这样，有very good和nice选项默认为选中。

<input type="checkbox" name="checkbox" id="checkbox">
<select name="test" id="selectMenu">
    <option>very good</option>
    <option>nice</option>
</select>

我已经为选择菜单分配了selectMenu的ID。

在这里，我使用了jQuery。 我存储了对checkbox和select menu引用，还创建了默认的“模板”以在未选中或选中的情况下更改innerHtml。 对于checkedContent ，我使用所需的选项创建了它，对于uncheckedContent我将其设置为默认的innerHtml，这是very good options 。

//store dom references in vars
var $checkbox = $("#checkbox");
var $selectMenu = $("#selectMenu");

var checkedContent = "<option>not bad</option><option>bad</option>";
var uncheckedContent = $selectMenu.html();

$checkbox.on("click", function(){
   var $this = $(this);
   if($this.is(":checked:not")){
      $selectMenu.html(checkedContent);
    } else {
     $selectMenu.html(uncheckedContent);
    }
});

在这里看看JSFiddle。