Выбор нескольких Select и формирование запроса?

Question

[Дмитрий]

Здравствуйте!
Я в js не силен, и столкнулся с проблемой. Формирую запрос для фильтра, имею:

<form name="selcts" id="mytest">
    
<select name="mySelectBox[]" id="mySelectBox2" size="5" onclick="showSelected()">
    <option value="1">Value = 1</option>
    <option value="2">Value = 2</option>
</select>
<select name="mySelectBox[]" id="mySelectBox3" size="5" onclick="showSelected()">
    <option value="1">Value = 1</option>
    <option value="2">Value = 2</option>
</select>
</form>

и сам JS:

function showSelected() {
    // Find the select box in the DOM
    var sel   = document.getElementById('mySelectBox2') || false,
        url   = '',
        query = [1];
    
    if (!sel) {
        return false;
    }
    
    // Go through the option elements and find out which have been selected
    for (var i = 0, m = sel.length; i < m; i++) {
        if (sel[i].selected) {
            query.push(sel[i].value);
        }
    }
    
    // Build the query string to send via Ajax
    url = query.join('&sl=');
    
    // Debug the query string
    alert('somefile.php?sl=' + url);
}

Проблема в том, что срабатывает только первый селект, а другой не работает, как осуществить формирования полного урл для запроса, со всеми элементами select?

Answer 1

[Rsa97]

Вариант 1 - дать select'ам разные name и не мудрствуя лукаво отправить форму как есть через атрибут action.
Вариант 2 - в showSelected() обрабатывать не только mySelectBox2, но и mySelectBox3.

Answer 2

[Jaty4]

я думаю все дело в том что вы делаете выборку только из одного селекта
var sel = document.getElementById('mySelectBox2') || false,

советую передавать в функцию showSelected() значение для каждого селекта

Answer 3

[GeraldIstar]

var sel   = document.getElementById('mySelectBox2') || false

Ты в обоих случаях вызываешь функцию для обработки первого селекта.
В данной функции, this, если я не ошибаюсь, должно указывать на твои селекты. То есть, что бы доставть ид this.id нужно применить. Точно так же value достать.

Comments

[Дмитрий]

А как в данном случае прописать строку? Подскажите пожалуйста!

Answer 4

[GeraldIstar]

window.onload = function(){
	var selectSet = document.getElementsByClassName('mySelectBox');
	for (var i = 0; i < selectSet.length; i++){
		selectSet[i].addEventListener('click',function () {
			var selectedOptions = this.selectedOptions,
			values = [];
			for (var j = 0; j < selectedOptions.length; j++){
				values.push(selectedOptions[j].value);
			}
			var url = 'somefile.php?sl='+values.join('&sl=');
		})
	}		
}

<form name="selcts" id="mytest">
		<select name="mySelectBox[]" class="mySelectBox" size="5" multiple>
		    <option value="1">Value = 1</option>
		    <option value="2">Value = 2</option>
		</select>
		<select name="mySelectBox[]" class="mySelectBox" size="5" multiple>
		    <option value="1">Value = 1</option>
		    <option value="2">Value = 2</option>
		</select>
	</form>

В хтмл-ке поменять нужно id на класс, и поставить multiple если нужно выбирать несколько опций, как я понял.