CODEWITHSUNDEEP
jqueryhtmlselect
Thiwanka Dodanwela
Thiwanka Dodanwela

Reputation: 487

Assign selected to select box

This is my question.

<select class="myselect">
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
</select>

<div class="mydiv">
<div data-value="option 1">option 1</div>
<div data-value="option 2">option 2</div>
<div data-value="option 3">option 3</div>
<div data-value="option 4">option 4</div>
</div>

Second div (mydiv) structure i have generated from jquery. its functioned as a drop down menu. i want to change select box as selected, depend on the selection of "mydive" drop down.

i.e. if i select option 2 in mydiv, in myselect, option 2 should be assigned as selected (option 2).

how can i implement this?

Thanks

Upvotes: 0

Views: 54

Answers (4)

Bernhard Riegler
Bernhard Riegler

Reputation: 110

Something like this:

// do smthing on click to div dropdown
$('.mydiv > div').on('click', function (e) {
    // update val of select; get value from data attribute from clicked element
    $('.myselect').val($(this).data('value')).change();
 });

Upvotes: 1

Jai
Jai

Reputation: 74738

Try this:

$('.mydiv > div').on('click', function(){
    var val = $(this).data('value');
    $('.myselect').val(val);
});

Fiddle

You can use .data() method of jQuery to get the data-value of clicked div and just set the value in the .myselect.

This could help you understanding it: updated fiddle

Upvotes: 1

Ahmet Can G&#252;ven
Ahmet Can G&#252;ven

Reputation: 5462

$(".mydiv div").click(function(){
   $(".myselect").val($(this).data("value"));
});

You can select the option by jquery when mydiv clicked.

Here you go: jsFiddle

I had to edit my answer because of .data() is more dynamic on appended objects than .attr(). As a nice information I wanted to tell you this.

Have a nice work.

Upvotes: 1

Vinita Rathore
Vinita Rathore

Reputation: 550

Check this : http://jsfiddle.net/eLvhsL8x/

$('.mydiv div').on('click',function(){
  $('select option[value="'+$(this).attr("data-value")+'"]').attr('selected','selected');
});

Upvotes: 1

Related Questions