基於類的選擇框中的Javascript選項

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

<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的實現這個我試過以下，但不能讓它開始工作。

來源

2011-11-30 Pinkie

你的實現不起作用，因爲如果你嘗試設置'val（）'爲不存在的值，那麼select將被重置爲第一個選項。例如'$（'＃whatever'）。val（'r30'）;'會設置第三個選項，但是調用'$（'＃whatever'）。val（'yyy'）;'會重置select第一選項。 – kubetz

@dzejkej謝謝，我現在意識到了。有沒有辦法告訴它停止，如果發現一個值，而不是繼續並重置 – Pinkie

我不知道任何簡單的方法。但是，如果您有興趣，我創建了比以前更短的解決方案。看到我的答案或[直接這個]（http://jsbin.com/editib/5/edit）。 – kubetz

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

來源

2011-12-01 00:12:53 kubetz

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

來源

2011-11-30 23:58:25 simshaun

我不希望這個多選。只是按照我的問題進行常規選擇。無論如何+1顯示這種方式。 – Pinkie

基於類的選擇框中的Javascript選項

回答

相關問題