如何同步數據屬性和選擇框值？

Question

我有兩個要素，例如：

<select id="data">
  <option value=1>hoge</option>
  <option value=2>fuga</option>
  <option value=3>hogehoge</option>
</select>

<a href="#1" data-id="1">hoge</a>
<a href="#2" data-id="2">fuga</a>
<a href="#3" data-id="3">hogehoge</a>

如果我在選擇框上選擇hoge，則希望選擇data-id =“ 1”並使用jQuery做一些事情（更改背景等）。 如果單擊a[data-id="3"] ，則選擇框選項“ hogehoge”，反之亦然。

任何幫助，將不勝感激。

Answer 1

查看點擊偵聽器的最后一行。 您可以在元素上觸發更改，該更改將調用相應的偵聽器，而不是復制代碼。

 $(function() { $("#data").on("change", function() { $("a").removeClass("active"); // remove active class from all <a> $("a[data-id='" + $(this).val() + "']").addClass("active"); // add active class to link with corresponding data-id }); $("a").on("click", function() { $("#data option[value='" + $(this).data("id") + "']").prop("selected", true); // change the selected value $("#data").trigger("change"); // trigger change on #data to keep active link synced }); }); 

 .active { background-color: cornflowerblue; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="data"> <option value=1>hoge</option> <option value=2>fuga</option> <option value=3>hogehoge</option> </select> <a href="#1" data-id="1" class="active">hoge</a> <a href="#2" data-id="2">fuga</a> <a href="#3" data-id="3">hogehoge</a> 

Answer 2

$(document).ready( function(){
    $('a').click(function(){
        var id = $(this).data('id');
        $('#data').find('option[value='+id+']').prop('selected',true);
    )};
)};

我在JSFiddle https://jsfiddle.net/dphf267u/中實現了該功能