的下拉列表中設置不同的值，如果複選框選中或取消選中

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> 

我想如果複選框選中告訴我「不壞」和「壞」的值或如果複選框未選中，則顯示'nice'和'非常好'的值。另一方面，通過更改複選框值來更改下拉列表的值。有什麼辦法可以解決這個問題嗎？

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。我保存對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 here。