从下拉列表中选择“值”以转到URL

Selecting Value from drop downs to go to URL

本文关键字：URL 下拉列表 选择      更新时间：2023-09-26

我正在尝试设置一个下拉菜单，并让最终选择将您带到一个URL。我可以让各种下拉菜单工作，但在你做出最终选择后，浏览器不会做任何事情。

我可以接近，但我失去了隐藏其他不适用的下拉列表的能力！

<tr>
  <td>
    <p align="center">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <label for="qmt-vehicle">Vehicle:</label>
      <select id="qmt-vehicle" name="vehicle">
        <option></option>
        <option class="BMW" value="BMW">BMW</option>
        <option class="Audi" value="Audi">Audi</option>
      </select>
      <p align="center">
        <label for="qmt-manufacturer">Manufacturer:</label>
        <select id="qmt-manufacturer" name="manufacturer">
          <option></option>
          <option class="BMW" value="http://www.google.com">BMW</option>
          <option class="BMW" value="http://www.google.com">&nbsp;&nbsp;&nbsp;M3</option>
          <option class="BMW" value="http://www.google.com">&nbsp;&nbsp;&nbsp;M5</option>
          <option class="Audi" value="Audi">Audi</option>
          <option class="Audi" value="http://www.google.com">&nbsp;&nbsp;&nbsp;A4</option>
          <option class="Audi" value="http://www.google.com">&nbsp;&nbsp;&nbsp;S4</option>
        </select>
        <script>
          $(function() {
            $("#qmt-vehicle").on("change", function() {
              var levelClass = $('#qmt-vehicle').find('option:selected').attr('class');
              console.log(levelClass);
              $('#qmt-manufacturer option').each(function() {
                var self = $(this);
                if (self.hasClass(levelClass)
                  || typeof(levelClass) == "undefined") {
                  self.show();
                } else {
                  self.hide();

                }

              });
            });
          });
        </script>
        <p align="center">
  </td>
</tr>

您只需要将其添加到脚本中：

 $("#qmt-manufacturer").on("change",function()
     {
        window.location.href = $('#qmt-vehicle').find('option:selected').attr("value");
    });

您可以这样修改select标记：

<select id="qmt-manufacturer" name="manufacturer" onchange="location = this.options[this.selectedIndex].value">

（取自本问题->使用<option>标签内的href链接）

我知道这不是一个答案，因为@DinoMyte已经回答了。。但是为了稍微简化你的代码。。使用

$('#qmt-manufacturer').val('').find('> option').hide();
$('#qmt-manufacturer > option[class="'+levelClass+'"]').show();

而不是

$('#qmt-manufacturer option').each(function () {
         var self = $(this);
        if (self.hasClass(levelClass)|| typeof(levelClass) == "undefined") {
             self.show();
         } else {
             self.hide(); 
         }
 });
相关文章：