选择选项和无线电;反映其他选择

时间:2013-04-10 23:57:10

标签: javascript html

我有一张地图并使用单选按钮我允许用户在地图上选择一个点,但他们也可以使用下拉列表选择他们是否愿意(这在地图很小的手机上更容易)。

如何使收音机和下拉菜单选项保持同步,以便在选择其中一个时,另一个选择反映了这一变化?

设置单选按钮的代码:

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>";

1 个答案:

答案 0 :(得分:0)

以下是一些代码,可以根据常用值保持选择和单选按钮同步。可能最好将前两个选择器更改为更具体(使用类名或其他内容)。

(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/