Question

我正在寻找一些我遇到的问题的帮助。

开发需要识别用户地理位置的网站，然后从下拉列表中自动选择相关项目 - 然后触发指向其所在区域的相关网站的链接。

3个站点 - 英国，欧盟，美国。

我有下拉框处理链接，但我无法触发自动更改。目前正在尝试使用JS地理融合（已经在以前的网站上工作过）但是我无法让它在这个网站上工作。

非常感谢任何有关此事的帮助

（我不得不把链接拿出去，因为没有声望发布超过2个链接）

以下代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="dropdown-currency.css">
</head>


<script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script type="text/javascript">
myCurrency.currecyList = '<select id="currencySelection">'
+ '<option countryType="UK" value="GBP">GBP</option>'
+ '<option countryType="EU" value="EUR">EUR</option>'
+ '<option countryType="USA" value="USD">USD</option>'
+ '</select>';
myCurrency.is = 'GBP'; //DEFAULT.
myCurrency.target = "#currencySelection";
myCurrency.twiceMode = false; 
myCurrency.exec();
</script>


  <script type="text/javascript">
jQuery(document).ready(function($) {
    $.getJSON("http://www.geoplugin.net/json.gp?jsoncallback=?",
        function (data) {
            var continent = data["geoplugin_continentCode"];
            var country = data["geoplugin_countryCode"];
            if ( continent == 'EU' ) {
                if ( country != 'GB' ) {
                    // Europe - Euros
                    $("#currencySelection").val("EUR");
                    $("#currencySelection").change();
                }
            }
            else
            {
                // USA, Canada & Rest of World - USD
                $("#currencySelection").val("USD");
                $("#currencySelection").change();
            }
        });

   });
   </script>



</script>

<body>
<br>
<br>

 <div class="currecyList">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="currencySelection" class="dropdown-content">
    <a href="http://www.google.co.uk">GBP</a>
    <a href="http://www.google.ca">USD</a>
    <a href="#">EUR</a>
  </div>
</div>

</body>



</html>

下拉-currency.css

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */
.currecyList {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: show;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

#currencySelection select{
    color: #888;
    border:1px solid #ebebeb;

HTML组合下拉列表：基于地理位置的JavaScript重定向

0 个答案: