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

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

Javascript根据类选择选择框中的选项

2 个答案: