如何使用 Ajax 创建动态选择表单？

Question

没有 Jquery，只是普通的 XMLHttpRequest。

所以流程是一个非常直观的流程。用户有个人资料，可以随时更改他对该表单的选择。这是一个多选。数据当然存储在服务器上的数据库中。

我想将数据库信息中的更改与用户在旅途中选择的内容同步。我环顾四周，似乎几乎每个人都遇到了这个问题，因为我不能说经过多次尝试后我已经弄清楚了，我希望得到一些帮助。似乎连使用什么事件都存在一些问题。

我的失败尝试是这样的：

function checkSelect(selection)
{
params = "selected=" + selection.selected
request = new ajaxRequest()
request.open("POST", "checkdbOpts.php", true)
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
request.setRequestHeader("Content-length", params.length)
request.setRequestHeader("Connection", "close")

request.onreadystatechange = function()
{
    if (this.readyState == 4)
        if (this.status == 200)
            if (this.responseText != null)
                O('cat').innerHTML = this.responseText
}
request.send(params)
}

ajaxRequest 只是一个封装了 XMLHttpRequest 对象的跨浏览器实例化的函数。

<select id="cat" name="select[]"  multiple="multiple" onClick >
<option value="Opt1" onClick="checkSelect(this.selectedIndex)"> Value1</option>
<option value="Opt2" onClick="checkSelect(this.selectedIndex)"> Value2</option>
<option value="Opt3" onClick="checkSelect(this.selectedIndex)"> Value3</option>
<option value="Opt4" onClick="checkSelect(this.selectedIndex)"> Value4</option></select>

.php文件根据数据库信息输出一个select标签，并启用selected属性。

关于如何做到这一点的任何想法？

Answer 1

我会使用：

<select id='cat' onchange='checkSelect(this)'>  
   <option value='opt1'>Value1</option>  
   <option value='opt2'>Value2</option>  
   ...  
</select>  

和功能：

function checkSelect(field)
    {
    params = "selected=" + field.options[field.selectedIndex].value
    ...