使用jQuery将动态表放在链接的选择框中

时间:2013-10-06 13:58:17

标签: javascript php jquery mysql sql

我有一个购买申请表,我创建了3个链式选择框(类别,子类别,产品描述)我创建这些链式选择框的参考是这个网站http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/问题是我想请求许多产品的问题是怎么样的?我想把我要求的所有内容都放在数据库中。不知怎的,我发现他们使用javascript的代码,但唯一的工作行只是第一行。当我选择例如。类别:办公用品所有子类别选择框(行)都受到影响。这是我的代码:

<html>
<head>
<script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
    $("select#type").attr("disabled","disabled"); 


    $("select#category").change(function(){
    $("select#type").attr("disabled","disabled");
    $("select#type").html("<option>wait...</option>");
    var id = $("select#category option:selected").attr('value');
    $.post("select_type.php", {id:id}, function(data){
        $("select#type").removeAttr("disabled");
        $("select#type").html(data);
    });

    });

    $("select#desc").attr("disabled","disabled");
    $("select#type").change(function(){
    $("select#desc").attr("disabled","disabled");
    $("select#desc").html("<option>wait...</option>");
    var id = $("select#type option:selected").attr('value');
    $.post("select_desc.php", {id:id}, function(data){
        $("select#desc").removeAttr("disabled");
        $("select#desc").html(data);
    });

    });
$("form#select_form").submit(function(){
    var cat = $("select#category option:selected").attr('value');
    var type = $("select#type option:selected").attr('value');
    var descr = $("select#desc option:selected").attr('value');
    if(cat>0 && type>0 && descr>0)
    {
        var result = $("select#desc option:selected").html();
        $("#result").html('your choice: '+result);
    }
    else
    {
        $("#result").html("you must choose two options!");
    }
    return false;
 });
});
</script>

<script type="text/javascript">
    function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var colCount = table.rows[0].cells.length;

    for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
            case "text":
                    newcell.childNodes[0].value = "";
                    break;
            case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
            case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
        }
    }
}

function deleteRow(tableID) {
    try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 2) {
                alert("Cannot delete all the rows.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }


    }
    }catch(e) {
        alert(e);
    }
}




</script>
</head>
<body>
<?php include "select.class.php"; ?>
<form id="select_form">
    <input type="button" value="Add" onclick="addRow('tableID')" />

    <input type="button" value="Delete" onclick="deleteRow('tableID')"  
 />

<table id="tableID">

<tr>
    <td></td>
    <td>Category</td>
    <td>SubCategory</td>
    <td>Product Description</td>        
</tr>


<tr>

    <td><input type="checkbox" name="chkbox[]" /></td>
    <td>
    <select id="category" name="category[]">
        <?php echo $opt->ShowCategory(); ?>
    </select>
    </td>

    <td>
    <select id="type" name="type[]">
         <option value="0">choose...</option>
    </select>
    </td>

    <td>
    <select id="desc" name="desc[]">
         <option value="0">choose...</option>
    </select>
    </td>

</tr>
</table>

<input type="submit" value="confirm" />
</form>
<div id="result" name="result[]"></div>
</body>
</html>

我需要帮助!

0 个答案:

没有答案