1

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

$('#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。有任何想法吗？

4

3 回答 3

0

如果我理解正确：

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。

于 2012-11-15T15:01:54.010 回答
0

你的 priceTo 是选择列表。使用以下命令获取所选值：

$('#form').submit(function(e) {
        window.location.href = initialURL + priceTo.options[priceTo.selectedIndex].value
        e.preventDefault();
    });
于 2012-11-15T15:14:11.540 回答
0

您可以使用一个小辅助函数来获取一个<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中使用=和作为记录和字段分隔符的约定。|
于 2012-11-15T15:15:13.047 回答