多選，語法錯誤，不能識別的表達式：選項[值= CC DD]

Question

我有一個多選它看起來像這樣：

<select name="test" id="test" multiple="multiple"> 
<option value="aa" id="at1">AA</option> 
<option value="bb" id="at1">BB</option> 
<option value="cc dd" id="at1">CC DD</option> 
<option value="ee" id="at1">EE</option></i> 
</select> 

現在，我使用此代碼找到的值，並選擇選項：

var at=$("#divat").text();//at="bb,cc dd,ee" 
atMulti = at.split(',');//atMulti=['bb','cc dd','ee'] 
$.each(atMulti,function(n,value){ 
    $('option[value='+value+']',$('#test)).prop('selected',true); 
} 

我收到錯誤

$("option[value='"+value+"']",$('#test)).prop('selected',true);} 

錯誤代碼說

Syntax error, unrecognized expression: option[value=cc dd] 

如果我修改我的代碼，以

$.each(atMulti,function(n,value){ 
    $("option[value='"+value+"']",$('#test)).prop('selected',true); 
} 

沒有錯誤，但只

<option value="bb" id="at1">BB</option> 

會選擇第一個匹配的值。如何解決這個問題呢？

Answer 1

用相同的html頁面製作具有相同id的多個元素會導致invalid標記。因此，試圖象下面這樣：

var at="aa,bb,cc dd,ee";//values to be select 
 
atMulti = at.split(',');//atMulti=['bb','cc dd','ee'] 
 
$.each(atMulti,function(n,value){ 
 
    $("option[value='"+value+"']").prop('selected',true);//remove $("#test") from here 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="test" id="test" multiple="multiple"> 
 
<option value="aa">AA</option> 
 
<option value="bb" >BB</option> 
 
<option value="cc dd">CC DD</option> 
 
<option value="ee">EE</option> 
 
</select>