Question

I have a div that contains many classes. If the the div is clicked on and one of it’s classes matches the value any option in the select box, i want that option to be selected.

<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>

How do i achieve this with JavaScript or jQuery
I tried the following but can’t get it to work.

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

Here is the JSBin snippet.

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

EDIT:

Created a JSBin with shorter solution – HERE

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