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

var myVideos = ['link1', 'link2', 'link3'];

我在JSFiddle中实现了这个功能 https://jsfiddle.net/dphf267u/

如何同步data-attr和select box vaule？

2 个答案: