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

时间:2014-03-03 12:57:13

标签: javascript html ajax xmlhttprequest

没有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标签,其中选中的属性已启用。

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

1 个答案:

答案 0 :(得分: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
    ...