将多个下拉值附加到 URL答案

【问题标题】：Append multiple dropdown values to URL将多个下拉值附加到 URL
【发布时间】：2012-11-15 14:59:08
【问题描述】：

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

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

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

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

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

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

<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=[object%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。有什么想法吗？

【问题讨论】：

标签： javascript jquery url drop-down-menu onchange

【解决方案1】：

your priceTo 是选择列表。使用以下获取选定的值：

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

【讨论】：

效果很好，谢谢！ *编辑：文本框的“priceTo.options[priceTo.selectedIndex].value”相当于什么？

【解决方案2】：

如果我理解正确：

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。

【讨论】：

【解决方案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>

注意事项：

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

【讨论】：