Question

我正在使用允许在我的网站上进行房地产搜索的应用程序。该应用程序带有非常有限的搜索功能表单，所以我采用了它并尝试通过IDX解决方案提供商提供的URL参数来增强它。其中一个参数是创建一个URL并组合多个城市名称，以便一次搜索多个城市中的列表。我已经在表单中添加了一个多选字段，但问题是每个城市之间必须有一个序列号＆lt; ＆GT;符号。

所以搜索结果看起来像这样，第一个城市必须是数字＆lt; 0＆gt;：

www.yourblog.com/idx/?idx-q-Cities<0>=Irvine&idx-q-Cities<1>=Laguna%20Beach

我需要一种方法来将多个选择字段中选择的选项组合起来以实现上述结果。

以下是多选的表单部分的外观。

<form action="http://www.mmysite.com/idx/" method="get"   onsubmit="prepareSearchForm(this)">
<table>
<tr>
<th><label for="idx-q-Cities">Select Your Cities</label></th>   
<td>
<select multiple name="idx-q-Cities"  title="Type or select your cities">
    <option id="idx-q-Cities"  class="idx-q-Cities" value="Abbeville">Abbeville</option><br>
    <option id="idx-q-Cities"  class="idx-q-Cities" value="Abilene">Abilene</option>
</select>
</tr>
</table>
</form>

我有人帮我试图让这个工作，但它没有成功。这是他们想出来的。也许它会有所帮助。

<script>
function prepareSearchForm(form){
var count = 0;

$(form).children('.idx-q-Cities').each(function(i,o){
    var cityDOM = document.createElement('select');
    cityDOM.name = "idx-q-Cities<" + count++ + ">";
    cityDOM.value = o.value;
    form.appendChild(cityDOM);
});

return true;
}
</script>

有关如何纠正上述JS或其他方式采取多选选项并将它们合并以便最终得到上述URL的任何想法？

Answer 1

好吧，我会给你这个：

function prepareURL() {
    var vals = $('select option:selected').map(
        function(i){
            return $(this).attr('class') + '<' + i + '>=' + $(this).val();
        }).get().join(';');
    var URL = 'www.yourblog.com/idx/' + vals;
    $('#urloutput').text(URL);
}

$('select').click(

function() {
    prepareURL();
});

JS Fiddle demo

但我不确定你是否希望第一个选择的'get'选项为0（无论是Abeline还是Abbeville），或者你是否希望Abbeville 总是 0选项和Abeline 总是是1选项。所以我也基于这种可能性为你提供了一个选择：

function prepareURL() {
    var vals = $('select option:selected').map(
        function(){
            return $(this).attr('class') + '<' + $(this).index('select option') + '>=' + $(this).val();
        }).get().join(';');
    var URL = 'www.yourblog.com/idx/' + vals;
    $('#urloutput').text(URL);
}

$('select').click(

function() {
    prepareURL();
});

JS FIddle demo

另外，鉴于这似乎是一个GET字符串，我不禁觉得你应该在某个地方有一个?。但是，由于某种原因，我会留给你实施，万一你不想要它。

而且，作为（最终？）附录，我强烈建议在将vals变量作为网址提交之前对其进行网址编码：

var URL = 'www.yourblog.com/idx/' + encodeURIComponent(vals);
$('#urloutput').text(URL);

JS Fiddle demo

Answer 2

如果您使用的是PHP，请更改：

<select multiple name="idx-q-Cities" title="Type or select your cities">

要：

<select multiple name="idx-q-Cities[]" title="Type or select your cities">

你的javascript肯定是错误的。在服务器端执行此操作。

需要组合来自multiselect选项的值以使用javascript形成URL

2 个答案: