Javascript根據類選擇選擇框中的選項

Question

我有一個包含許多類的div。 如果單擊div並且其中一個類與選擇框中的任何選項的值匹配，我希望選擇該選項。

<div class="abc cdf fff r10 yyy">
<select id="whatever">
    <option value="r10">test10</option>
    <option value="r20">test20</option>
    <option value="r30">test30</option>
</select>

我如何使用JavaScript或jQuery實現這一點我嘗試了以下但無法使其工作。

var roundclasses = $(this).attr('class').split(/\s/); //This outputs the array of classes sucessfully
for (var i in roundclasses){
    $('#whatever').val(roundclasses[i]);
}

Answer 1

這是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');
    }
});

Answer 2

這是JSBin片段。

HTML：

<div id="clickDiv" class="abc cdf fff r30 yyy">
  <p>CLICK</p>
</div>
<select id="whatever">
  <option value="r10">test10</option>
  <option value="r20">test20</option>
  <option value="r30">test30</option>
</select>

JS（使用jQuery）：

var div = $("#clickDiv");
var sel =  $("#whatever");
var options = $("#whatever option");
div.click(function() {
  options.each(function(index, e) {
    if (div.hasClass(e.value)) {
      sel.val(e.value);
    }
  });
});

編輯：

用更短的解決方案創建了一個JSBin - HERE

var div = $("#clickDiv");
var options = $("#whatever option");
div.click(function() {
  options.attr('selected', function() {
    return div.hasClass(this.value);
  });
});