Question

我有一个现有的下拉菜单按钮。见http://testing.siteapp.mobi/test

现在，当用户点击蓝色下拉菜单按钮时，会打开一个空白，用户点击该按钮然后会出现一个下拉状态，其中列出了4个状态。然后用户选择其中一个状态。选择后，所选状态将填充空白字段，然后用户单击现有的＆＃34; GO＆＃34;按钮。

这是来自子表单的代码。所以我需要改变它。我需要这样做以下之一，这更容易：

1）当用户点击蓝色下拉菜单按钮时，会打开一个空白，用户点击该按钮然后会出现一个下拉状态，其中列出了4个状态。然后用户选择其中一个状态。选择后，所选状态将填充空白字段，然后用户单击现有的＆＃34; GO＆＃34;按钮。我需要这个将用户直接带到指定的URL。 4个州中的每个州都有不同的URL。因此，根据所选的一个，它们最终会出现在不同的网址上。

OR

2）代替填入空白区域的选定状态，用户点击＆＃34; GO＆＃34;按钮........一旦用户从现有下拉菜单中选择状态，用户就被直接带到指定的URL。与上述相同，但没有＆＃34; GO＆＃34;按钮。

您可以在http://testing.siteapp.mobi/test看到我现在拥有的内容，然后右键单击，然后查看页面来源。

我感谢任何帮助。请记住，我是一名新手，所以如果您决定帮助我，您必须尽可能明确，并且实际上向我展示了正确的代码以及在现有代码中插入所需更改的位置。

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>

   <title>Test</title>
   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />

   <link rel="stylesheet" href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/styles.css?v=1.0.0.75" type="text/css" media="all" />
   <link rel="stylesheet" href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/styles-ltr.css?v=1.0.0.75" type="text/css" media="all" />
   <!--[if IE 7]><link  rel="stylesheet" href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/ie7Fix.css?v=1.0.0.75"/><![endif]-->
   <!--[if IE 8]><link  rel="stylesheet" href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/ie8Fix.css?v=1.0.0.75"/><![endif]-->
   <noscript><link href="http://files.mobilebuilder.net/Styles/mobile-frontend/css/styles-no-script.css?v=1.0.0.75" rel="stylesheet" type="text/css" media="all" /></noscript>

   <script type="text/javascript"> 
      var gResources = 'http://files.mobilebuilder.net/'; 


       var gP = '156908';
       l10n = { };
   </script>

   <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
   <script type="text/javascript" src="http://files.mobilebuilder.net/Scripts/jquery-1.10.0.min.js?v=1.0.0.75"></script>
   <script type="text/javascript" src="/Handlers/l10n/app.l10n.js.ashx?lang=en-US&v=1.0.0.75"></script>
   <script type="text/javascript" src="http://files.mobilebuilder.net/Styles/mobile-frontend/js/app.main.min.js?v=1.0.0.75"></script>




<style type="text/css">

body { background-color:#ffffff;background-image:none; }
.content-mobile  {   }

body, a.base-link {color:#313131;font-family:Arial, Helvetica, sans-serif;font-size:14px;}

a { color:#313131;}




.content-mobile .block-head.header { background-color:#373737;background-color:rgba(55,55,55,0);background-image:-moz-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-ms-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-o-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(55,55,55,1)),color-stop(100%, rgba(41,41,41,1)));background-image:-webkit-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#373737',endColorstr='#292929')"; }
.content-mobile .block-head.alink, .shopping-cart-notification { background-color:#373737;background-color:rgba(55,55,55,0);background-image:-moz-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-ms-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-o-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:-webkit-gradient(linear, left top, left bottom,color-stop(0%, rgba(55,55,55,1)),color-stop(100%, rgba(41,41,41,1)));background-image:-webkit-linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);background-image:linear-gradient(top,rgba(55,55,55,1) 0%,rgba(41,41,41,1) 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#373737',endColorstr='#292929')"; }
.content-mobile .block-head.alink .header-link { }

.content-mobile .block .block-head.header h2 {color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:18px;}
.content-mobile .block .block-head.alink .link, .shopping-cart-notification {color:#ffffff;font-family:Arial, Helvetica, sans-serif;font-size:18px;}

.content-mobile p, .content-mobile .block-feed p,   .content-mobile .form label,.content-mobile .gallery h4,
.content-mobile .description, .content-mobile .form table th, .content-mobile .form table td,
.content-mobile .back-link, .content-mobile .home-link,    .content-mobile .geo-locations p   {color:#313131;font-family:Arial, Helvetica, sans-serif;font-size:14px;}

.content-mobile .block .block-head.alink .link,  .content-mobile .block .block-head.header h2 { text-align:center; } 


.gallery .gallery-navigation li { background:#ffffff; }

 .content-mobile .main-footer a { color:#313131;}



   .content-mobile .button-holder a, .content-mobile .button-holder-image a { color: #FFFFFF; }

   .content-mobile .button-holder { padding:0;margin:15px 0; }
   .content-mobile .button-holder a { margin:0 auto;padding:10px 14px;width:250px;height:25px;outline:none;border:0 none;background:transparent url(http://storage.mobilebuilder.net/common/images/library_buttons_06.png) left top no-repeat; }
   .content-mobile .button-holder a .button-text { position:static;display:block;margin:0;padding:0;border:0 none;font-size:18px;background:transparent; }
   .content-mobile .button-holder a .lt, .content-mobile .button-holder a .rt,
   .content-mobile .button-holder a .lb, .content-mobile .button-holder a .rb { display:none; }
   .coupon-snippet .coupon-border { border-color:#313131; }







</style>



</head>
    <body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);" is_preview="False" mode="page" storage_start_url="http://storage.mobilebuilder.net/" relative_start_url="/">
        <div class="content-mobile">
            <div><div id="root">


    <div class="block clearfix collapsible-container">



<div class="block-head header collapsible-trigger"  style="margin:20px;-moz-border-radius:10px 10px 10px 10px;-o-border-radius:10px 10px 10px 10px;-webkit-border-radius:10px 10px 10px 10px;border-radius:10px 10px 10px 10px;background-color:#0e6db0;background-image:none;" > 
            <div class="wrapper">

                <h2  style="padding-left:40px;">Begin Here</h2>
                    <span class="header-glyph">
                            <em></em>
                    </span>
            </div>  
 </div>
                <div class='block-content clearfix collapsible-content' style="background-color:#f5f5f5;background-image:none;">               

<div id="contactform0" class="form">
    <div>
        <form id="form0" method="post" action="">
            <input name="id" type="hidden" value="156908"/>
            <input name="lang" type="hidden" value="en-US"/>
            <input name="number" type="hidden" value="0"/>
            <div class="form-fields">

        <label class="field-selectbox-label">






            <span class="form-field-name">Choose Service Location

                    <span title="Choose Service Location is required." id="span_Choose Service Location">*</span>

            </span>



                <select title="Choose Service Location" class="field-select selectbox valid" name="Choose Service Location">
                    <option></option>
                            <option value="Alabama">Alabama</option>
                            <option value="Florida">Florida</option>
                            <option value="Georgia">Georgia</option>
                            <option value="Louisiana">Louisiana</option>
                </select>

        </label>

            </div>
             <div style="display: none;"><input type="text" name="PrevSp" id="PrevSp"/></div>
            <div class="ta-center">
                    <input id="submit_form" onclick="return checkForm(0)" class="submit_form" type="submit" value="GO"  />
            </div>


        </form>
    </div>
</div>

                </div>          
    </div>


<div class="main-footer">
            <div>
            <!-- See Full Website -->
        </div>

</div>


<script type="text/javascript">
    (function () {
       var pa = document.createElement("img");
       var referrerHost = "";
       if (document.referrer) {
          var tempA = document.createElement('a');
          tempA.href = document.referrer;
          referrerHost = tempA.hostname;
       }
       var src = "http://" + document.location.host + "/handlers/visitstatistic.ashx";
       var innerPart = "path=" + document.location.pathname + "&referrer=" + referrerHost + "&r=" + (new Date()).getTime();
       if (document.location.search) {
           src += document.location.search;
           src += "&" + innerPart;
       }
       else {
           src += "?" + innerPart;
       }
       pa.width = 1;
       pa.height = 1;
       pa.onload = function () {
          document.body.removeChild(pa);
       };
       pa.src = src;
       document.body.appendChild(pa);
    })();
</script>

            </div></div>
        </div>


    </body>
</html>

Answer 1

如果你可以使用jquery，试试这个：

<select id = "stateSelect" title="Choose Service Location" class="field-select selectbox valid" name="Choose Service Location">
                    <option></option>
                            <option value="Alabama">Alabama</option>
                            <option value="Florida">Florida</option>
                            <option value="Georgia">Georgia</option>
                            <option value="Louisiana">Louisiana</option>
                </select>
<script>
$('#stateSelect').change(function() {
var s = $('#stateSelect').val();
location.href = '/' + s + '';
});
</script>

这假定目标URL位于同一个域中，并且选项值为URL的最后一部分。如果它不同，您只需在jquery函数的最后部分添加完整路径。

FIDDLE

如果您需要为每个州提供不同的URL（域），您可以将URL添加为每个选项的值，并在`location.href'处创建绝对路径：

<select id = "stateSelect" title="Choose Service Location" class="field-select selectbox valid" name="Choose Service Location">
                    <option></option>
                            <option value="alabama.com">Alabama</option>
                            <option value="florida.com">Florida</option>
                            <option value="georgia.com">Georgia</option>
                            <option value="louisiana.com">Louisiana</option>
                </select>
<script>
$('#stateSelect').change(function() {
var s = $('#stateSelect').val();
location.href = 'http://www.' + s + '';
});
</script>

Second Fiddle

Answer 2

好的，所以sideroxylon的功能远比我的瘦，但它实际上并不能解释不同状态的不同URL。我确实想出了一个全面的答案，你正在寻找使用＆＃34; GO＆＃34;按钮和我的代码包括以下功能：

当用户点击＆＃34;开始＆＃34;栏。
在用户更改值时注册该值并将其传递给go buttton。
如果用户点击了＆＃34; GO＆＃34;没有选择任何东西。
当用户点击＆＃34; GO＆＃34;时，打开一个新标签/窗口。然后重置表单元素。（注意：您可以通过将_blank的所有实例替换为_self来改变当前窗口，而不是打开新窗口。

注意：我还要求您使用 JQuery ，因此首先需要在文档的<head>部分插入此代码：

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

然后，为了使其功能类似于您的示例链接，您可以使用以下JQuery：

// Drop the form down when user clicks the "begin" bar
$(".block-head").on("click", function(){
    $(".block-content").slideToggle();
});

// Set two global variables
var state = $("select.field-select").val();
var x = document.getElementById("form0");

// Register the selection each time the user changes it and pass it to the "GO" button
$(".field-select").change(function(){
    var state = $("select.field-select").val();
    $("#go").on("click", function(){
        event.preventDefault();
        if (state === "") {
            $("#choose").text(" *Please choose a state -->");
        } else if(state === "Alabama"){
            window.open("YOUR URL HERE", "_blank");
            x.reset();
            state = "";
            $("#choose").text("");
        } else if (state === "Florida"){
            window.open("YOUR URL HERE", "_blank");
            x.reset();
            state = "";
            $("#choose").text("");
        } else if (state === "Georgia"){
            window.open("YOUR URL HERE", "_blank");
            x.reset();
            state = "";
            $("#choose").text("");
        } else if (state === "Louisiana"){
            window.open("YOUR URL HERE", "_blank");
            x.reset();
            state = "";
            $("#choose").text("");
        }
        console.log(state); // This line is for testing purposes 
     });
});

// Account for when the user clicks "GO" right off the bat without choosing anything
$("#go").on("click", function(){
if(state === "") {$("#choose").text(" *Please choose a state -->");}    
});

只需使用我提供的代码替换您在HTML <body>中的当前javascript代码，就可以了！

以下是DEMO

需要帮助 - 下拉选项表单的代码更改 - 将提交更改为URL链接

2 个答案: