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>

我从jquery生成的第二个div（mydiv）结构。它的功能是下拉菜单。我想将选择框更改为选中，取决于选择＆＃34; mydive＆＃34;下降。

即。如果我在mydiv中选择选项2，在myselect中，选项2应该被指定为选中（选项2）。

我该如何实现？

由于

Answer 1

试试这个：

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

Fiddle

您可以使用.data() jQuery方法获取点击data-value的{{1}}，只需设置div中的值。

这可以帮助您理解它：updated fiddle

Answer 2

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

点击mydiv时，您可以通过jquery选择选项。

在这里：jsFiddle

我必须编辑我的答案，因为.data()对附加对象的动态比.attr()更动态。作为一个很好的信息，我想告诉你这个。

干得好。

Answer 3

请检查：http://jsfiddle.net/eLvhsL8x/

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

Answer 4

这样的事情：

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

将所选内容分配给选择框

4 个答案:

Fiddle