4 に答える
POST で送信するクエリ文字列を自分で生成する必要があります。使用する HTML タグは次のとおりです。
<select multiple name="categories[]" onchange="sendCategories(this);">
そしてJavascript関数：
function sendCategories(sel){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
document.getElementById("my_div").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST","http://www.mysite.com/update_categories.php",true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var values = [], i, j, cur;
for (i = 0, j = sel.options.length; i < j; i++) {
cur = sel.options[i];
if (cur.selected) {
values.push(encodeURIComponent(cur.value));
}
}
if (values.length) {
values = encodeURIComponent(sel.name) + "=" + values.join("&" + encodeURIComponent(sel.name) + "=");
} else {
values = null;
}
xmlhttp.send(values);
}
イベントを から に変更したことに注意してくださいonclick。ただしonchange、要素がクリックされたときにこの関数を実行するか、その値が実際に変更されるかは、実際にはあなた次第です...不要な呼び出しを減らすことができます。
<select>これにより、複数のオプションが選択された の値を送信するために通常使用されるクエリ文字列が生成されます。
これは、クエリ文字列がここでどのように生成されるかを示す jsFiddle です: http://jsfiddle.net/kKWQM/
あなたはこのようなことをすることができます、
<select multiple name="categories[]" onclick="sendCategories(this)">
そしてJQueryを使ってAJAXを作り、
function sendCategories(sel){
var values = $(select).serialize();
console.log (values); // See if you get the serialized data in console.
$.ajax({
type: 'POST',
url: "http://www.mysite.com/update_categories.php"
data: values,
success: function (data) {
document.getElementById("my_div").innerHTML = data;
}
});
}
参考までに、Netscape イベント バインディング モデルは非推奨です。クロス ブラウザ イベント バインディングを次のように使用できます。
JS 文字列関数と配列関数を使用して、ソリューションを実装できます。事実上、Apache に送信する必要がある文字列には、次のようなパターンが含まれている必要があります。
xxx[]=a&xxx[]=b&xxx[]=c
ここで、SELECT 要素の名前はxxx[]フォーム内にあり、a、b、c はユーザーが選択した 3 つの値です。
そうです、ユーザーが SELECT で別のオプションを選択した回数だけキー名を繰り返しています。
JS では、選択したオプションの配列を使用できます。
selected_options.join("&xxx[]=") to produce that pattern.
jQuery を使用すると、これが簡単になります。ラップされた選択で .val() を呼び出すと、選択された値の配列が返されます。これらをサーバーに投稿するだけです。
HTML:
<html>
<body>
<form>
<select name="mySelect" multiple="on">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
</form>
<input id="submitButton" type="button" value="Click To Submit"/>
</body>
</html>
JavaScript:
$(function() {
$('#submitButton').click(function() {
var valuesArray = $('select[name=mySelect]').val()
$.ajax({
type: 'POST',
url: '/path/to/php', // your php url would go here
data: { mySelect: valuesArray }
}).done(function(msg) {
// parse response from msg
});
});
});