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

没有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>

价值1
价值2
价值3
价值4

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

关于如何正确处理这个问题，有什么想法吗？

我会使用：

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

---

只是为了确定，如果选择第一个选项，php响应的输出会是什么样子？“selected=opt1”。这就是你的意思吗？是的，我不确定是这对还是一个完整的html标记…我看到了一些令人困惑的例子，这只是你构建的字符串。我会省去“selected=”而只发送所选选项的值..我仍然无法让它工作。我的php正在回显“selected=option”，我已经删除了params中带引号的字符串。调试这个的方法是什么？

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