Получение выбранных параметров из Multi Select Tag с помощью Javascript и отправки через XHR

Question

Я ищу, чтобы отправить форму через XHR, но у меня возникли проблемы с получением выделенных данных для передачи.

<form> 
    <select multiple id="select" > 
     <option class="userOptions" value="1">Tyler Durden</option> 
     <option class="userOptions" value="2">Robert Paulson</option> 
     <option class="userOptions" value="3">Marla Singer</option>   
    </select> 
</form> 

Что бы быть лучшим способом, чтобы ухватиться за выбранных пользователем значений и передать их на страницу через XHR?

Я пробовал такие вещи, как document.getElementsByClassName("userOptions").selected, но он ничего не возвращает. Кроме того, следует ли упаковать его в виде массива? Или есть лучший способ отправить его? Спасибо за ваше время!

Answer 1

Вот функция в ванильным Javascript, который поможет вам:

function getMultiValue(selectId) 
{ 
    var list  = document.getElementById(selectId), 
     selected = [], 
     i; 
    for (i = 0; i < list.options.length; i++) { 
     if (list.options[i].selected) { 
      selected.push(list.options[i].value); 
     } 
    } 
    return selected; 
} 

В случае вашего примера, вы должны использовать этот способ:

var values = getMultiValue('select'); 

Если вы хотите, чтобы эти значения преобразуются в строку запроса:

var queryString = 'select=' + values.implode('&select='); 

Если значения содержат специальные символы, вы должны сделать это перед строительство строки запроса:

var i; 
for (i = 0; i < values.length; i++) { 
    values[i] = escape(values[i]); 
} 

Или просто немного измените предыдущую функцию:

function getMultiValue(selectId, mustEscape) 
{ 
    var list  = document.getElementById(selectId), 
     selected = [], 
     i; 
    for (i = 0; i < list.options.length; i++) { 
     if (list.options[i].selected) { 
      selected.push(mustEscape ? escape(list.options[i].value) : list.options[i].value); 
     } 
    } 
    return selected; 
} 

И используйте его так:

var values  = getMultiValue('select', true), 
    queryString = 'select=' + values.implode('&select='); 

Answer 2

Используйте jQuery, и это просто!

Вы можете сделать это следующим образом: http://jsfiddle.net/Hm2KL/

$("#sendbtn").click(function() { 

    var data = $("#selectme").val(); 
    alert(data); 

    $.ajax({ 
     url: .., 
     data: {data} 
      etc.. 
    }); 

}); 

JQuery Ajax Doc: http://api.jquery.com/jQuery.ajax/