AJAX将表添加到表单元格

我在表单上有2个选择菜单：类型和类别。当用户从类型菜单中选择一些内容时，我希望它执行一个查询数据库的PHP脚本，并返回所选类型的匹配类别列表供他们从类别菜单中选择。AJAX将表添加到表单元格

这是行之有效的，但我现在想更新它，以便它添加类categoryGroup（“成功”或“错误”取决于AJAX结果）。这里是我的表在2个单元：

<div class="form-group"> 
    <label for="title" class="control-label col-sm-3">Type</label> 
    <div class="input-group col-xs-8"> 
    <select class="form-control" name="type" id="type" onchange="getCategories(this.value)"> 
     <option value="" selected></option> 
     <option value="Business">Business</option> 
     <option value="Commercial">Commercial</option> 
     <option value="Commercial Land">Commercial Land</option> 
     <option value="Land">Land</option> 
     <option value="Rental">Rental</option> 
     <option value="Residential">Residential</option> 
     <option value="Rural">Rural</option> 
    </select> 
    </div> 
</div> 

<div class="form-group" id="categoryGroup"> 
    <label for="title" class="control-label col-sm-3">Category</label> 
    <div class="input-group col-xs-8" class="" id="categoryList"> 
    <select class="form-control" name="category" id="category"> 
     <option value="" selected></option> 
    </select> 
    </div> 
</div>

，这里是我的脚本，它的工作与AJAX调用适当的选项来代替类别选择菜单：

<script type="text/javascript"> 
    function getCategories(str) { 
    if (str == "") { 
     document.getElementById("categoryList").innerHTML = ""; 
     return; 
    } 
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     document.getElementById("categoryList").innerHTML = xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("POST", "getPropertyCategories.php?type=" + str, true); 
    xmlhttp.send(); 
    } 
</script>

我不知道如何更新这也是一类增加了categoryGroup ID

来源

2015-09-20 user982124

很基本的，但我认为你得到它的要点是：

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     document.getElementById("categoryList").innerHTML = xmlhttp.responseText; 
    } 

    var status = xmlhttp.status == 200 ? 'success' : 'error' 
    var group = document.getElementById("categoryGroup") 
    group.classList.add(status) 
}

来源

2015-09-20 04:01:51 Anchor

AJAX将表添加到表单元格

回答

相关问题