时间戳

首页 > 解决方案 > PHP 和 Javascript 中的多个类

javascript - PHP 和 Javascript 中的多个类

问题描述

我是 php、html、css 的新手，并且正在开发一个项目（为我自己）。我得到了一个带有依赖下拉框的表单，但我不允许分配多个类，因为它与我的 javascript 冲突。我想使用相同的类来保持我的表单相似。我可以做什么？如果我选择使用多个类，然后我的 javascript 将无法正常工作。我得到了名为“category”和“task_type”的下拉框，我想使用“form-control”类来保持我的表单在 javascript 中相似，我不允许使用 form-control 时间。

源代码：https ://www.allphptricks.com/dynamic-dependent-select-box-using-jquery-and-ajax/

Category: <select name="category" class="form-control" required>
    <option value="0">Select Category</option>
    <?php
    include('dbconnect.php');
    $sql = mysqli_query($DBcon,"SELECT * FROM category");
    while($row=mysqli_fetch_array($sql))
    {
        echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
    } ?>
</select>
<br/><br/>
Task Type:<select name="task_type" class="form-control" required>
    <option>Select Task Type</option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".form-control").change(function()
        {
            var category_id=$(this).val();
            var post_id = 'id='+ category_id;

            $.ajax
            ({
                type: "POST",
                url: "ajax.php",
                data: post_id,
                cache: false,
                success: function(cities)
                {
                    $(".form-control").html(cities);
                }
            });

        });
    });
</script>

标签： javascriptphphtmlcss

解决方案

您不能为此使用form-control该类，因为您不希望两个下拉菜单都执行相同的操作。为它们提供 ID 以区分它们，并在选择器中使用这些 ID。

Category: <select id="category" name="category" class="form-control" required>
    <option value="0">Select Category</option>
    <?php
    include('dbconnect.php');
    $sql = mysqli_query($DBcon,"SELECT * FROM category");
    while($row=mysqli_fetch_array($sql))
    {
        echo '<option value="'.$row['category_id'].'">'.$row['category_name'].'</option>';
    } ?>
</select>
<br/><br/>
Task Type:<select id="task_type" name="task_type" class="form-control" required>
    <option>Select Task Type</option>
</select>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $("#category").change(function()
        {
            var category_id=$(this).val();
            var post_id = 'id='+ category_id;

            $.ajax
            ({
                type: "POST",
                url: "ajax.php",
                data: post_id,
                cache: false,
                success: function(cities)
                {
                    $("#task_type").html(cities);
                }
            });

        });
    });
</script>

推荐阅读