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()
  • =奇妙な文字が検索クエリURLのレコードと|フィールドの区切り文字として使用するという慣習に違反しないようにするために、値をエンコードするためにencodeURIComponent（）を使用することをお勧めします。
于 2012-11-15T15:15:13.047 に答える