0

私はWeb サイトのHTMLコードを扱っており、3 つの異なるドロップダウン メニューの値の関数として Web サイトを別の Web サイトにリンクさせようとしています。

私が必要としているのは、ユーザーを次の場所に移動させるhtmlコードです。

..../[第 1 メニュー選択]/[第 2 メニュー選択]/[第 3 メニュー選択].html

どうもありがとうございました、

アレックス

4

2 に答える 2

1 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
        function getUrl() {
            var part1 = document.getElementById("firstChoice").value;
            var part2 = document.getElementById("secondChoice").value;
            var part3 = document.getElementById("thirdChoice").value;
            return "http://"+part1+"/"+part2+"/"+part3+".html";
        }
        function gotoSelection() {
            var urlToGoTo = getUrl();
            alert(urlToGoTo);
            //location.href=urlToGoTo;
        }
        function setupLink() {
            var urlToGoTo = getUrl();
            document.getElementById("gotoLink").href=urlToGoTo;
        }
    </script>
</head>
<body onload="setupLink();">
    <select id ="firstChoice" onchange="setupLink();">
        <option>first1</option>
        <option>first2</option>
    </select>
    <select id ="secondChoice" onchange="setupLink();">
        <option>second1</option>
        <option>second2</option>
    </select>
    <select id ="thirdChoice" onchange="setupLink();">
        <option>third1</option>
        <option>third2</option>
    </select>
    <button onclick="gotoSelection();">goto</button>
    <a id="gotoLink" href="">goto by link</a>
</body>
</html>
于 2012-07-23T18:41:06.773 に答える
0

html 以外の何かが必要になります。幸いなことに、これは jQuery を使用して非常に簡単に行うことができます。

次のように、ドロップダウンに一意の ID を付けます。

<select id="dropdown1"> <option val="myValue1">... </select>
<select id="dropdown2"> <option val=myValue2">... </select>
...
<input type="submit" value="GO!" id="go" />

次に、jQuery を使用してドロップダウンから結果を取得できます。これを行うにはもっと洗練された方法があるかもしれませんが、これが基本的な機能です。

$(document).ready(function() {
  $("#go").click(function() {
    var dropdown1 = $("#dropdown1 option:selected").attr('val');
    var dropdown2 = $("#dropdown2 option:selected").attr('val');
    var dropdown3 = $("#dropdown3 option:selected").attr('val');
    var uri = "../"+dropdown1+"/"+dropdown2+"/"+dropdown3+".html";
    window.location.href = uri;
  });
});
于 2012-07-23T18:41:00.080 に答える