需要从多选选项组合值形成一个url与javascript

Need to combine values from multiselect option to form a url with javascript

本文关键字：一个 javascript url 选项 组合      更新时间：2023-09-26

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

搜索结果是这样的第一个城市必须是number <0>:

www.yourblog.com/idx/? idx-q-Cities<0> = Irvine& idx-q-Cities<1> =拉古纳海滩% 20

我需要一种方法，为在多个选择字段中选择的选项进行组合，以实现上述结果。

下面是有多重选择的部分。

<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有什么想法?

好吧，我给你这个:

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字符串，我不禁觉得你应该在URL的某个地方有一个?。但我把它留给你去实现，以防你出于某种原因不希望它在那里。

并且，作为(最后的?)补充，我强烈建议在将vals变量作为URL提交之前对其进行URL编码:

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

JS提琴演示

如果使用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肯定是错的。在服务器端执行此操作

相关文章：