Question

我有三个下拉列表，其中包含值：

<form action="search.php" method="post">
<p>Width</p>
<select class="form-control" name="width">
<option value="" selected="selected">Any width</option>
<option value="135">135</option>
<option value="145">145</option>
<option value="155">155</option>
<option value="165">165</option>
<option value="175">175</option>
</select>

<p>Height</p>
<select class="form-control" name="height">
<option value="" selected="selected">Any height</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
</select>

<p>Diameter</p>
<select class="form-control" name="diameter">
<option value="" selected="selected">Any diameter</option>
<option value="10">R10</option>
<option value="12">R12</option>
<option value="13">R13</option>
<option value="14">R14</option>
<option value="15">R15</option>
</select>

<input name="search" type="submit" value="Search">
</form>

我尝试实现的是将用户重定向到自定义网址（例如example.com/tires/size-185-65-15）并进行实际查询并显示结果。

查询不是真正的问题，而是基于他们的选择重定向。

重定向应该基于他们从宽度，高度和直径中选择的值（强制所有3个值都可以）。

有没有办法实现这个目标？我想也许是在javascript或jquery？

Answer 1

为您的所有＆＃34;选择＆＃34;添加ID标签，然后使用Javascript获取其值，构建自定义URL并重定向到它。

<script>
    function submitQuery() {
        var width = document.getElementById("width").value;
        var height = document.getElementById("height").value;
        var diameter = document.getElementById("diameter").value;
        var url = "example.com/tires/size-" + width + "-" + height + "-" + diameter;
        window.location = url;
    }
</script>
<form action="search.php" method="post">
    <p>Width</p>
    <select class="form-control" name="width" id="width">
        <option value="0" selected="selected">Any width</option>
        <option value="135">135</option>
        <option value="145">145</option>
        <option value="155">155</option>
        <option value="165">165</option>
        <option value="175">175</option>
    </select>

    <p>Height</p>
    <select class="form-control" name="height" id="height">
        <option value="0" selected="selected">Any height</option>
        <option value="25">25</option>
        <option value="30">30</option>
        <option value="35">35</option>
        <option value="40">40</option>
        <option value="45">45</option>
    </select>

    <p>Diameter</p>
    <select class="form-control" name="diameter" id="diameter">
        <option value="0" selected="selected">Any diameter</option>
        <option value="10">R10</option>
        <option value="12">R12</option>
        <option value="13">R13</option>
        <option value="14">R14</option>
        <option value="15">R15</option>
    </select>

    <input name="search" onclick="submitQuery()" value="Search">
</form>

Answer 2

可能的解决方案： 1）将提交按钮更改为链接并为其指定一个ID：

<a href="" id="submitLink">Search</a>

2）制作构建链接的Javascript函数：

function constructLink() {
  var link = "example.com/tires/size-";
  link += document.getElementsByName("width")[0].value;
  link += "-" + document.getElementsByName("height")[0].value;
  link += "-" + document.getElementsByName("diameter")[0].value;
  document.getElementById("submitLink").href = link;
}

3）将此JS函数添加到所有三个选择框的change事件中：

<select class="form-control" name="width" onchange="constructLink();">

那应该是它！

基于多个dropdon列表的自定义搜索

2 个答案: