document.getElementById - tablica

Question

Cześć,

Usiłuję obsłużyć form action multiple za pomocą ajax. Chodzi mi o to, że nie wiem jak sprawić by funkcja pobrała zmienną jako tablicę.

var jedzonko = document.getElementById("jedzonko").value;-ten fragment jest zły ale nie wiem jak poprawić.

Plik nadawczy:

<script>
function dodaj(){
    var hr = new XMLHttpRequest();
    var url = "multiple2.php";
    var jedzonko = document.getElementById("jedzonko").value;
    var vars = "jedzonko="+jedzonko;
    hr.open("POST", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
	    if(hr.readyState == 4 && hr.status == 200) {
		    var return_data = hr.responseText;
			document.getElementById("status").innerHTML = return_data;
	    }
    }
    hr.send(vars); // Actually execute the request
    document.getElementById("status").innerHTML = "processing...";
}
</script>
<form>
<select name="jedzonko[]" id="jedzonko" multiple="multiple">
<option value="cukierki">cukierki</option>
<option value="czekolada">czekolada</option>
<option value="lody">lody</option>
</select>
</form>
<button onclick="dodaj()">Funkcja JS</button>
<div id ="status">Tu się pojawi</div>

Plik odbiorczy:

<?php
foreach ($_POST['jedzonko'] as $selectedOption)
    echo $selectedOption."\n";
?>

 

Answer 1

document.querySelectorAll('option:checked')

Zwraca wszystkie zaznaczone opcje. Możes zużyć pętli for i sprawdzać tekst/vartość.

Answer 2

Wydaje mi się, że powinieneś przeiterować po wszystkich opcjach i sprawdzić właściwość selected.
Przykładowy kod (może nie działać, to tylko idea)
 

var jedzonko = document.getElementById("jedzonko").value
var wynik = []
for (var i=0; i<jedzonko.options.lenght; i++) {
    var option = jedzonki.options[i];
    if (option.selected)
        wynik.push(option.value)
}