javascript - 如果选中或未选中复选框，则为下拉列表设置不同的值

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>

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

这里我使用了 jQuery。我存储了对复选框和选择菜单的引用，并且还创建了默认"template"来在未选中或选中时更改innerHtml。对于checkedContent，我使用您想要的选项创建了它，对于uncheckedContent，我只是将其设置为默认的innerHtml，这是非常好并且不错的选项。

//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 here .