0

我正在开发一个网页，它有一个相关的下拉列表。其中第一个列表包含 5 个州，第二个包含该州内的城市。我使用下面显示的脚本来链接两个下拉列表。can i link a submit button in such a way to the 2nd dependent drop down list that when one option is selected in the list and the submit button is clicked, it should open another page, whereas when another option is selected and submit button is clicked它应该打开其他页面。基本上我希望每个选项在单击提交按钮时打开一些链接页面。通过搜索，我了解到我必须为此使用 php/javaquery，但我没有得到相应的代码。

我不希望提交按钮只打开 1 个特定页面。相反，我希望它打开对应于所选不同选项的 6 个不同页面。

如果是，我应该使用什么代码，因为第二个列表不在（选择标签）中，它使用 javascript 创建，如下所示：

 <script type="text/javascript">
 function configureDropDownLists(ddl1,ddl2) {
 var goa = ['GOA ASF', 'Goa LPG Plant', ];
 var maharashtra = ['AKOLA IRD', 'AURANGABAD LPG PLANT','WADALA I TERMINAL'];
 var rajasthan = ['AJMER LPG PLANT ','AJMER TERMINAL','UDAIPUR RRO'];
 var gujrat = ['AHMEDABAD NWZ LPG ', 'AHMEDABAD NWZ RETAIL','VADODARA IRD '];
 var madhyapradesh =['BAKANIA RIL', 'BHOPAL DSRO', 'BHOPAL RRO'];//this is my dependent list. i want these options to have links.

switch (ddl1.value) {
    case 'Goa':
        ddl2.options.length = 0;
        for (i = 0; i < goa.length; i++) {
            createOption(ddl2, goa[i], goa[i]);
        }
        break;
    case 'Maharashtra':
        ddl2.options.length = 0; 
    for (i = 0; i < maharashtra.length; i++) {
        createOption(ddl2, maharashtra[i], maharashtra[i]);
        }
        break;
    case 'Rajasthan':
        ddl2.options.length = 0;
        for (i = 0; i < rajasthan.length; i++) {
            createOption(ddl2, rajasthan[i], rajasthan[i]);
        }
        break;
    case 'Gujrat':
        ddl2.options.length = 0;
        for (i = 0; i < gujrat.length; i++) {
            createOption(ddl2, gujrat[i], gujrat[i]);
        }
        break;
     case 'MadhyaPradesh':
        ddl2.options.length = 0;
        for (i = 0; i < madhyapradesh.length; i++) {
            createOption(ddl2, madhyapradesh[i], madhyapradesh[i]);
        }
        break;
        default:
            ddl2.options.length = 0;
        break;
}

}

function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}
 </script>
 </HEAD>

 <BODY>

 <br>
 <div>
 <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1>

  <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Goa">Goa</option>
<option value="Maharashtra">Maharashtra</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Gujrat">Gujrat</option>
 <option value="MadhyaPradesh">MadhyaPradesh</option>
</select>

 <select id="ddl2">
 </select><br>
 <br>
 <input class="SubmitButton" type="submit" name="SUBMITBUTTON"   value="Submit" style="font-size:20px; " />
 </div>

这是我的设计代码！当我在第一个下拉列表中选择 goa 时，我通过我编写的代码在第二个相关下拉列表中获取 goa 的位置（例如：Goa Asf）。但我想要它做的是当我单击一个选项（例如：Goa Asf）并单击提交按钮时，它将打开一个页面“http：”，而当我选择其他选项时，它将选择另一个页面。

我知道如何将用 html 设计的普通下拉列表与提交按钮链接。bt 我不知道如何将由 javascript 创建的列表与提交按钮连接起来。请帮我编写代码并告诉我该怎么做。这是我用于将普通下拉列表与选项按钮链接的代码。这个我用于其他网页。我想用上面相同的代码来做这个

       <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
       <script>
        $('#link').on('submit', function (e) {
     e.preventDefault();
     var $form = $(this),
             $select = $form.find('select'),
            links = $select.val();
       if (links.length > 0) {
        for (i in links) {
            link = links[i];
            window.open(link);
        }
    }
});

如果你知道，请告诉我代码。

4

1 回答 1

1

这就是您将如何获得所选选项的值。我已经展示了第一个下拉列表，但是如果您愿意，您可以类似地获得第二个下拉列表的值。然后，您可以创建一个数组或创建一个 switch case 语句以将表单提交到不同的页面。

<div>
    <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A STATE:</H1>
    <form name="myForm" id="myForm" action="">
         <select id="ddl" name="dd1" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
   <option value=""></option>
   <option value="Goa">Goa</option>
   <option value="Maharashtra">Maharashtra</option>
   <option value="Rajasthan">Rajasthan</option>
   <option value="Gujrat">Gujrat</option>
    <option value="MadhyaPradesh">MadhyaPradesh</option>
   </select>

    <select id="ddl2" name="dd12">
    </select><br>
    <br>
    <!--<input class="SubmitButton" type="submit" name="submit"  id="submit" value="Submit" style="font-size:20px; " />-->
    <button id="submit" name="submit">Submit</button>


    </form>

    </div> 



   <script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
   <script>
    $(document).ready(function()
    { 
        $('#submit').on('click', function (e) {
            //e.preventDefault();
            var linkTo = $('select[name="dd1"]' ).val();
            var goTo;
            alert(linkTo);

            switch (linkTo) {
            case 'Goa':
                goTo = "www.google.com";
                break;
            case 'Maharashtra':
                goTo = "www.yahoo.com";
                break;
            }



            $("#myForm").attr("action", goTo);
             alert(goTo);
            $("#myform").submit();

        });

    });

希望这可以帮助...

于 2016-06-28T14:33:09.517 回答