选择选项和收音机;反映其他选择

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/