フォームを送信すると、選択したオプションのテキストではなく値が自動的に送信されるため、言及した動作は正常です。あなたが言及したスイッチ ( '.$row['name'].' to '.$row['id'].
) は正常に動作するはずです。フォームを台無しにしている場合は、フォームを台無しにすることの意味について詳しく説明してください。
それ以外の場合は、可能な解決策があります。これは最も洗練されたソリューションではなく、おそらく複雑さを必要としない単純なフォームに最も適していますが、基本的にはクエリ文字列を生成して手動でリダイレクトします。これは、 http://www.ssdtutorials.com/tutorials/series/dependable-dropdown.htmlでリンクした元の例に基づいています。
JS:
var formObject = {
run: function (obj) {
obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
var id = obj.attr('id');
var v = obj.val();
jQuery.getJSON('http://jquery-dependable-dropdown.ssdtutorials.com/mod/update.php', {
id: id,
value: v
}, function (data) {
if (!data.error) {
obj.next('.update').html(data.list).removeAttr('disabled');
} else {
obj.nextAll('.update').html('<option value="">----</option>').attr('disabled', true);
}
});
}
};
$(function () {
$('.update').live('change', function () {
formObject.run($(this));
});
$('#submitButton').click(function () {
window.location.href = 'test.php?gender=' + $('#gender').find(':selected').text() + '&category=' + $('#category').find(':selected').text() + '&colour=' + $('#colour').find(':selected').text();
});
});
HTML:
<div id="wrapper">
<form id="theForm" action="" method="post">
<select name="gender" id="gender" class="update">
<option value="">Select one</option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
<select name="category" id="category" class="update" disabled="disabled">
<option value="">----</option>
</select>
<select name="colour" id="colour" class="update" disabled="disabled">
<option value="">----</option>
</select>
<input type="button" id="submitButton" value="submit">
</form>
http://jsfiddle.net/BUJnf/1/
それが少し役立つことを願っています!