0

地図があり、ラジオボタンを使用して、ユーザーが地図上のポイントを選択できるようにしますが、必要に応じてドロップダウンを使用して選択することもできます (地図が小さい携帯電話では簡単です)。

ラジオとドロップダウンの選択を同期して、一方が選択されたときに他方に変更が反映されるようにするにはどうすればよいですか?

ラジオ ボタンを設定するためのコード:

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

1 に答える 1

0

共通の値に基づいて、選択ボタンとラジオ ボタンの同期を維持するコードを次に示します。最初の 2 つのセレクターをもう少し具体的なものに変更するのがおそらく最善です (クラス名などを使用します)。

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

于 2013-04-11T00:25:48.507 に答える