从html选择无按钮提交，但使用href而不是值？答案

【问题标题】：Buttonless submitting from html select, but using href and not value?从html选择无按钮提交，但使用href而不是值？
【发布时间】：2017-09-17 20:59:28
【问题描述】：

我不想要一个按钮来提交下拉列表中的信息，所以我认为 onchange 将是提交它的最佳方式。但是当我使用 href 而不是 value 时，我不知道如何实现它。有没有办法做到这一点？

我有这个用于 html：

    <a href='index.php'>Home </a>|
    <a href='index.php?mode=customers'>List of Customers </a>|
    <a href='index.php?mode=movieList&genre=Drama'>Drama Movies </a>|
    <a href='index.php?mode=movieList&genre=Adventure'>Adventure Movies </a>|
    <select>
            <option disabled selected>Popular Movies</option>
            <option><a href='index.php?mode=favoriteGenre&genre=Adventure'>Adventure</a>
            <option><a href='index.php?mode=favoriteGenre&genre=Romance'>Romance</a>
            <option><a href='index.php?mode=favoriteGenre&genre=Drama'>Drama</a>
            <option><a href='index.php?mode=favoriteGenre&genre=Comedy'>Comedy</a>
            <option><a href='index.php?mode=favoriteGenre&genre=Sci-Fi'>Sci-Fi</a>
    </select>

然后是下拉菜单对应的php：

case "favoriteGenre" :

      $genre = (isset($_GET['genre'])) ? $_GET['genre'] : -1;
      // step 1: Define SQL Statement
      $sql = "SELECT first_name, last_name, title, `movies`.type, date_out FROM `movies`,`customers` WHERE `movies`.type='".$genre."'";
      // obtain data
      $movieInfo = getAll($sql);
      // define column labels
      $movie_labels = array('First Name', 'Last Name', 'Title', 'Genre', 'Date Out');
      echo "All instances of rental where the genre is " . $genre . ":";
      // display data
      displayTable($movieInfo, $movie_labels);
      break;

如果这个问题在其他地方得到了回答，请指出我正确的方向。到目前为止，我还没有在任何地方找到它。谢谢！

【问题讨论】：

这是一个很好的解决方案：stackoverflow.com/a/2000689
<a> 不是<option> 元素的有效子节点
如果我将其更改为： GET 仍然可以获取模式和流派吗？并且在选择选项而非使用按钮时，该帮助将有助于提交提交？ span>
你的 Jquery 怎么样，你把它作为一个标签，它肯定需要它或一些好的 javascript
您还需要将 onchange 处理程序附加到选择输入：<select onchange="window.location = this.value;">

标签： javascript php jquery html-select onchange

【解决方案1】：

不要将链接保留在选项中，而是像这样为选项赋值 -

    <a href='index.php'>Home |</a>
<a href='index.php?mode=customers'>List of Customers |</a>
<a href='index.php?mode=movieList&genre=Drama'>Drama Movies |</a>
<a href='index.php?mode=movieList&genre=Adventure'>Adventure Movies |</a>
<select id="movieOptions">
        <option disabled selected>Popular Movies</option>
        <option value="mode=favoriteGenre&genre=Adventure">Adventure</option>
        <option value="mode=favoriteGenre&genre=Romance">Romance</option>
        <option value="mode=favoriteGenre&genre=Drama">Drama</option>
        <option value="mode=favoriteGenre&genre=Comedy">Comedy</option>
        <option value="mode=favoriteGenre&genre=Sci-Fi">Sci-Fi</option>
</select>

<script>
    $("#movieOptions").change(function () {
        var goTo = this.value;
        console.log(goTo);
        window.location.href = "index.php?" + goTo;
    });
</script>

【讨论】：