Question

我正在尝试做类似的事情：

$('#dropdown1').change(function() {
    window.location = $(this).val();
});

我需要构建一个包含2个下拉列表和一个文本框的页面，我需要存储每个值的值，然后在提交表单时将其附加到URL。

选择所有选项后，网址需要与此类似：

http://www.domain.co.uk/search-results/?searchOptions=dropdown1=value1|dropdown2=value2|textarea1=value3

我已经想出了如何存储下拉列表的值，但我似乎无法将其附加到网址上。这就是我要去的地方：

<script type="text/javascript">
function getValues() {
    var priceTo = document.form.priceTo.value;
    //alert (priceTo);
}

$(document).ready(function() {
    //var zip = $('#zip').val();
    var initialURL = 'http://www.domain.co.uk/search-results/?searchOptions=priceto='

    $('#form').submit(function(e) {
        window.location.href = initialURL + priceTo
        return false;
    });

});
</script>

<body>

<form id="form" name="form">
    Price:
    <select name="priceTo" id="priceTo" onchange="getValues()">
        <option value="5000">Up to £5,000</option>
        <option value="10000">Up to £10,000</option>
        <option value="20000">Up to £20,000</option>
        <option value="40000">Up to £40,000</option>
        <option value="80000">Up to £80,000</option>
    </select>
    <input type="submit" id="submit" value="submit"/>
</form>

</body>

出于某种原因，这会导致： http://www.domain.co.uk/search-results/?searchOptions=priceto= [对象％20HTMLSelectElement]

编辑：我终于让它适用于大多数浏览器，包括使用此代码的IE8：

<script type="text/javascript">
$(document).ready(function() {

    //var zip = $('#zip').val();
    var initialURL = 'http://www.selektvolvocars.co.uk/selekt-search-results/?searchOptions='

    $('#form').submit(function(e) {
        window.location.href = initialURL + priceTo.options[priceTo.selectedIndex].value + model.options[model.selectedIndex].value + '%7Czipcode=' +document.getElementById('zip').value + '%7Cproximitydistance=50'
        e.preventDefault();
    });

});
</script>

出于某种原因虽然它在IE9中不起作用......对我来说毫无意义，它只是吐出一个完全混乱的URL。有什么想法吗？

Answer 1

如果我理解正确：

var initialURL = 'http://www.domain.co.uk/search-results/?searchOptions=priceto='    
$('#form').submit(function(e) {
        window.location = initialURL + $("#priceTo").val() + "|" + $("#anyOtherSelects").val();
        e.preventDefault();
});

您可以删除其余的Javascript。

Answer 2

您的价格是选择列表。使用以下命令获取所选值：

$('#form').submit(function(e) {
        window.location.href = initialURL + priceTo.options[priceTo.selectedIndex].value
        e.preventDefault();
    });

Answer 3

您可以使用一个小助手函数来获取<select>或<input>元素的id，并返回其值。例如：

<script type="text/javascript">
//Helper function to return id and value. The id parameter shouldn't have the # sign at its beginning
function getIdVal( id ) {
    return id + "=" + encodeURIComponent( $("#"+id).val() );
}
//run this when the document is loaded and ready
$(document).ready(function() {

    //var zip = $('#zip').val();
    var initialURL = 'http://www.domain.co.uk/search-results/?'

    $('#form').submit(function(e) {
        window.location.href = initialURL + getIdVal( "priceFrom" ) + "|" + getIdVal( "priceTo" );
        return false;
    });

});
</script>

注意：

您可以使用<option>获取<select>元素中所选的当前$(...).val()的值。
使用encodeURIComponent（）对值进行编码是一种很好的编程习惯，只是为了确保没有奇怪的字符会破坏使用=和|作为记录和字段分隔符的约定在搜索查询网址中。

将多个下拉列值附加到URL

3 个答案: