Question

我正在开发一个具有从属下拉列表的网页。其中第一个列表包含5个状态，第二个列表包含该状态中的城市。我使用下面显示的脚本链接两个下拉列表。我可以将提交按钮以这种方式链接到第二个从属下拉列表，当在列表中选择一个选项并单击提交按钮时，它应该打开另一个页面，而当选择另一个选项并单击提交按钮时它应该打开一些其他页面。基本上我希望每个选项在单击提交按钮时打开一些链接页面。通过搜索，我明白我必须使用php / javaquery，但我没有得到相同的相应代码。

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

如果是，我应该使用哪些代码，因为第二个列表不在（select标签）中，使用下面显示的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中设计的普通下拉列表与提交按钮链接。我不知道如何将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);
        }
    }
});

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

Answer 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();

        });

    });

希望这会有所帮助......

如何使用javascript链接提交按钮和在html中创建的OPTION LIST

1 个答案: