Question

我正在尝试在我的网站上进行自定义搜索，搜索年份+汽车模型

所以我把这个下拉列表作为

<form method="get" id="searchform" action="http://store.ijdmtoy.com/-s/146.htm">
    <INPUT TYPE=HIDDEN NAME="searching" VALUE="Y">
    <p>
        <select size="1" name="Search">
            <option>2014</option>
            <option>2013</option>
            <option>2012</option>
            <option>2011</option>
            <option>2010</option>
            <option>2009</option>
            <option>2008</option>
            <option>2007</option>
            <option>2006</option>
            <option>2005</option>
            <option>2004</option>
            <option>2003</option>
            <option>2002</option>
            <option>2001</option>
            <option>2000</option>
        </select>

        <select size="1" name=" ">
            <option>TSX</option>
            <option>MDX</option>
            <option>RDX</option>
            <option>RSX</option>
            <option>NSX</option>
            <option>ZDX</option>
        </select>

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

当我运行此搜索时，它将返回

http://store.ijdmtoy.com/Acura-LED-Interior-Light-Bundle-Deal-s/146.htm?searching=Y&Search=2011&+=TSX

而不是

http://store.ijdmtoy.com/Acura-LED-Interior-Light-Bundle-Deal-s/146.htm?searching=Y&Search=2011+TSX

我想知道如何编辑此代码，以便返回年份+汽车模型，而不是使用＆amp;和=他们之间？

Answer 1

我首先会给你的选择元素一些id，以便你可以识别它们。在我的代码中，我将使用selectYear和selectMake的ID。如果您愿意使用jQuery，则可以执行以下操作：

$(function() {
    $('#searchform').submit(function(e) {
        e.preventDefault();
        var year = $('#selectYear').val();
        var make = $('#selectMake').val();
        window.location.href = "http://store.ijdmtoy.com/Acura-LED-Interior-Light-Bundle-Deal-s/146.htm?searching=Y&Search=" + year + "+" + make;
    });

});

Answer 2

抱歉，因为你在表单中有两个DropDown，所以它会发送两个不同的-2值，因为你没有指定名称，它并不意味着它将连接值并作为单个参数发送。要么更改接受值的页面，要么使用jquery在表单提交之前连接值。

签出以下代码，它将对你有用.. !!

$("#searchform").submit(function(e){
    // prevent to submit the form
    e.preventDefault();

    //getting values
    var searching = $(this).find('input[name="searching"]');
    var search = $(this).find('select[name="Search"]');
    var other = $(this).find('select[name="OtherVal"]');

    //getting url
    var url = $(this).attr("action");

    // changing the values as u want
    var url = url+"?searching="+searching.val()+"&Search="+search.val()+"+"+other.val();

    //redirect to new URL
    window.location.href = url;

    //return false to double sure defult values are not posting to the form
    return false;
})

Answer 3

获取完整代码。检查出来记住第4行。必须有正确的jquery文件路径 请注意我给第二个DropDown命名了..

<html>
<head>
<!-- jquery file path-->
<script src="jquery.min.js" style="text/javascript"></script>
<script>
$("document").ready(function(){
    $("#searchform").submit(function(e){
        // prevent to submit the form
        e.preventDefault();

        //getting values
        var searching = $(this).find('input[name="searching"]');
        var search = $(this).find('select[name="Search"]');
        var other = $(this).find('select[name="OtherVal"]');

        //getting url
        var url = $(this).attr("action");

        // changing the values as u want
        var url = url+"?searching="+searching.val()+"&Search="+search.val()+"+"+other.val();

        //redirect to new URL
        window.location.href = url;

        //return false to double sure defult values are not posting to the form
        return false;
    })
});
</script>
</head>
<body>          
<form method="get" id="searchform" action="http://store.ijdmtoy.com/-s/146.htm">
    <INPUT TYPE=HIDDEN NAME="searching" VALUE="Y">
    <p>
        <select size="1" name="Search">
            <option>2014</option>
            <option>2013</option>
            <option>2012</option>
            <option>2011</option>
            <option>2010</option>
            <option>2009</option>
            <option>2008</option>
            <option>2007</option>
            <option>2006</option>
            <option>2005</option>
            <option>2004</option>
            <option>2003</option>
            <option>2002</option>
            <option>2001</option>
            <option>2000</option>
        </select>

        <select size="1" name="OtherVal">
            <option>TSX</option>
            <option>MDX</option>
            <option>RDX</option>
            <option>RSX</option>
            <option>NSX</option>
            <option>ZDX</option>
        </select>
        <input type="submit" value="Search" name="">
    </p>
    </form> 
</body>
</html>

HTML下拉菜单问题

3 个答案: