這裏是jsFiddle。
HTML:
<div id="clickme" class="abc cdf fff r10 yyy">Click Me</div>
<br>
<br>
<select multiple="true" id="dd">
<option value="r1">test1 (r1)</option>
<option value="r2">test2 (r2)</option>
<option value="r2">test3 (cdf)</option>
<option value="yyy">test4 (yyy)</option>
<option value="r10">test9 (r10)</option>
<option value="r10">test10 (r10)</option>
</select>
CSS:
#clickme {
background: #FF0000;
color: #FFF;
font: 14px Arial, sans-serif;
height: 100px;
line-height: 100px;
text-align: center;
width: 100px;
}
JS:
var $dd = $("#dd"),
$dd_opts = $dd.find('option');
$("#clickme").click(function() {
var classes = $(this).attr('class').split(' '),
class_len = classes.length;
$dd.val('');
for (x = 0, class_len = classes.length; x < class_len; x++) {
var cls = classes[x],
$opts = $dd_opts.filter('[value="'+ cls +'"]');
$opts.attr('selected', 'selected');
}
});
你的實現不起作用,因爲如果你嘗試設置'val()'爲不存在的值,那麼select將被重置爲第一個選項。例如'$('#whatever')。val('r30');'會設置第三個選項,但是調用'$('#whatever')。val('yyy');'會重置select第一選項。 – kubetz
@dzejkej謝謝,我現在意識到了。有沒有辦法告訴它停止,如果發現一個值,而不是繼續並重置 – Pinkie
我不知道任何簡單的方法。但是,如果您有興趣,我創建了比以前更短的解決方案。看到我的答案或[直接這個](http://jsbin.com/editib/5/edit)。 – kubetz