Нужно объединить значения из опции множественного выбора, чтобы сформировать URL с JavaScript

Question

Я использую приложение, которое позволяет поиск недвижимости на моем сайте. Приложение поставляется с очень ограниченной формой функциональности поиска, поэтому я взял ее и попытался улучшить ее с помощью параметров URL, которые предоставляет поставщик решений IDX. Одним из таких параметров является создание URL-адреса и объединение нескольких названий городов для поиска списков в нескольких городах одновременно. Я добавил в форму поле множественного выбора, но проблема в том, что у каждого города должен быть порядковый номер между символами <>.

Таким образом, поиск будет выглядеть так, и первый город должен быть числом <0>:

www.yourblog.com / IDX /? IDX-д-город <0> = Ирвин & IDX-д-город <1> = Лагуна% 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 (будь то Абелин или Абвиль), или если вы хотите, чтобы Abbeville всегда был * 1011 Опция * и Абелайн всегда будут 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. Но я оставляю это вам реализовать, если вы по какой-то причине этого не хотите.

И, как (окончательное?) Дополнение, я настоятельно рекомендую URL-кодирование переменной vals перед отправкой в ​​виде URL:

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 наверняка неверен.Сделайте это на стороне сервера.