时间戳

首页 > 解决方案 > 尝试使用 HTML 创建下拉菜单

jquery - 尝试使用 HTML 创建下拉菜单

问题描述

我正在尝试创建一个下拉菜单，但是每当我提交按钮时，什么都没有发生。这是到目前为止的代码：

      <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.
});

标签： jqueryhtml

解决方案

   $('.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 来阻止点击事件

推荐阅读