Question

我正在尝试创建一个下拉菜单，但是，每当我提交按钮时，都不会发生任何事情。这是到目前为止的代码：

      <div>

  <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>

  <select id ="dropDownId"> <!-- give an id to select box-->

      <option value="">Select Option</option>
      <option value="https://www.google.com/">Google</option>
      <option value="Bing">Bing</option>
      <option value="Yahoo">Yahoo</option>

  </select>
  <br>
  <input class="SubmitButton" type="submit" name="SUBMITBUTTON"  value="Submit" style="font-size:20px; " />
</div>
<script src = "//code.jquery.com/jquery-3.0.0.min.js"></script> <!-- add jquery library-->
<script type = "text/javascript">
$('.SubmitButton').click(function(){ // on submit button click

    var urldata = $('#dropDownId :selected').val(); // get the selected  option value
    window.open("http://"+urldata+".html") // open a new window. here you need to change the url according to your wish.
});

Answer 1

除了Jquery CDN url和html标签外，我什么都没改变。工作正常。下面是代码，

<html>
<body>   
<div> 
<H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>
<select id ="dropDownId"> <!-- give an id to select box-->

  <option value="">Select Option</option>
  <option value="https://www.google.com/">Google</option>
  <option value="Bing">Bing</option>
  <option value="Yahoo">Yahoo</option>

</select>
<br>
<input class="SubmitButton" type="submit" name="SUBMITBUTTON"  value="Submit" style="font-size:20px; " />
</div>
<script src = "https://code.jquery.com/jquery-3.3.1.js"></script> <!-- add jquery library-->
<script type = "text/javascript">
$('.SubmitButton').click(function(){ // on submit button click

var urldata = $('#dropDownId :selected').val(); // get the selected  option value
window.open("http://"+urldata+".html") // open a new window. here you need to change the url according to your wish.
});

</script>
</body>
</html>

Answer 2

   $('.SubmitButton').click(function () { // on submit button click

            var urldata = $('#dropDownId :selected').val(); 
             window.location.replace("http://" + urldata + ".com"); //redirect to the url in the curent page
          //   window.open("http://" + urldata + ".com")// open a new window. here you need to 
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--Add buttons to initiate auth sequence and sign out-->
    <div>

        <h1><font ="TIMES ROMAN" font-color="BLUE"> SELECT An subject:</h1>

        <select id="dropDownId">
            <!-- give an id to select box-->

            <option value="">Select Option</option>
            <option value="google">Google</option>
            <option value="Bing">Bing</option>
            <option value="Yahoo">Yahoo</option>

        </select>
        <br>
        <input class="SubmitButton" type="submit" name="SUBMITBUTTON" value="Submit" style="font-size:20px; " />
    </div>

对我来说，它工作得很好，您应该将js阻止点击事件

Answer 3

为每个选项提供<option value="">

中的URL路径

  <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT An subject:</H1>

  <select id ="dropDownId"> <!-- give an id to select box-->

      <option value="">Select Option</option>
      <option value="https://www.google.com/">Google</option>
      <option value="https://www.bing.com/">Bing</option>
      <option value="https://www.Yahoo.com/">Yahoo</option>

  </select>
  <br>
  <input class="SubmitButton" type="submit" name="SUBMITBUTTON"  value="Submit" style="font-size:20px; " />
</div>
<script src = "//code.jquery.com/jquery-3.0.0.min.js"></script> <!-- add jquery library-->
<script type = "text/javascript">
$('.SubmitButton').click(function(){ // on submit button click

    var urldata = $('#dropDownId :selected').val(); // get the selected  option value
    window.open(urldata) // open a new window. here you need to change the url according to your wish.
});

</script>

尝试使用HTML创建下拉菜单

3 个答案: