javascript - 选择选项和收音机；反映在其他方面的选择

Question

我有一张地图并使用单选按钮允许用户在地图上选择一个点，但他们也可以使用下拉菜单进行选择（这在地图很小的手机上更容易）。

如何使单选和下拉选择保持同步，以便在选择一个时，另一个反映更改？

设置单选按钮的代码：

echo"<div class='site' style='margin:".$y."px 0px 0px ".$x."px;'>
    <input type='radio' id='site_".$site_id."' name='site_id'  value='".$site_id."' disabled/>
    <label for='site_".$site_id."'><span>".$site_id."</span></label>
    </div>";

用于在下拉菜单中创建选项

echo "<select id='site_select' name='site_select'>";
  foreach($avail_sites as $site){
    echo "<script>document.getElementById('site_".$site->id."').disabled=false;</script>";
    echo "<option value='".$site->id."'>Site: ".$site->name."</option>";
  }
  echo "</select>";

Answer 1

下面是一些代码，可以根据常用值保持选择和单选按钮同步。最好将前两个选择器更改为更具体一点（使用类名或其他东西）。

(function() {
    var sel = document.querySelector("select"),
    opts = document.querySelectorAll("input[type='radio']");

    sel.addEventListener('change', function() {
       var val = this.options[this.selectedIndex].value;
       for(var i=0, max = opts.length; i<max; i++) {
           if (opts[i].value == val) {
               opts[i].checked = "checked";
           }
       }
    });

    for(var i=0, max = opts.length; i<max; i++) {
        opts[i].addEventListener('click', function() {
            var val = this.value;
            for (var i=0, max=sel.options.length; i<max; i++) {
                if (sel.options[i].value == val) {
                   sel.options[i].selected = "selected";
                   return;
               }
            }
        });
    }
})();

http://jsfiddle.net/ryanbrill/QCEbJ/