我有一张地图并使用单选按钮我允许用户在地图上选择一个点,但他们也可以使用下拉列表选择他们是否愿意(这在地图很小的手机上更容易)。
如何使收音机和下拉菜单选项保持同步,以便在选择其中一个时,另一个选择反映了这一变化?
设置单选按钮的代码:
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>";
答案 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;
}
}
});
}
})();