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

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> 

如果我挑上選擇框霍格，我想數據-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/