多链式SELECT标签JavaScript和jQuery

时间:2013-10-06 10:24:13

标签: javascript php jquery html select

美好的一天! :)

我在这个页面http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/上使用php和jQuery创建了一个链式选择,我创建了一个javascript来添加和删除select标签我在互联网上的某个地方 但是当我在第一行选择一个类别时,会启用子类别的所有内容以及产品说明。就像这个http://i.stack.imgur.com/H9nfb.jpg

一样

这是我的代码:

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

希望有人能帮助我。 :)

1 个答案:

答案 0 :(得分:1)

<select type='text' class='chosen-select'>                                                                              
    <option value='initial'>Select One...</option>                                                                           
</select>

<select 'type='text' class='chosen-select' >                                                                               
    <option value='1' class='initial'>-----</option>                                                                                                                                             
</select>

使用类似的东西。如果用户选择“选择一个”,它将在下一个按钮中显示“----”。相应地设置类以使其适合您。