Question

以下对于一种模式非常有用。但是我希望它可以与其他模式一起使用，而且我不知道如何更改此代码来实现这一目标。

有什么想法吗？

这是我的模态按钮：

<a name="view" data-toggle="modal" data-target="<?php  echo $row['ID']; ?>" >View</a>

模式内容：

<div class="modal fade" id="<?php  echo $row['ID']; ?>" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-body">
            <label for="test1">Test: </label>
            <select required class="form-control" name="test1" id="test1">
            <option selected value="<?php echo $row['test1'];?>"><?php echo $row['test1'];?></option>
                <?php 
                else if ($row['test1'] == "A")
                {                                           
                    echo "<option value='B'>B</option>".
                      "<option value='C'>C</option>";
                }
                if ($row['test1'] == "B")
                {                                           
                    echo "<option value='A'>A</option>".
                      "<option value='C'>C</option>";
                }

                else if ($row['test1'] == "C")
                {                                           
                    echo "<option value='A'>A</option>".
                      "<option value='B'>B</option>";
                }
                ?>
            </select>

            <label for="level">Level: </label>
            <input class="form-control" name="level" id="level" disabled value = <?php echo $row['level']; ?>>

            <button type="submit" class="btn btn-success" name="update" >Update</button>
        </div>
    </div>
</div>

脚本代码：

$(document).ready(function ()
{       
    $(#"test1").change(function ()
    {
        var test = $(this).val();

        if (test == "A")
        {
            document.getElementById("level").value = "AAA";
        }
        else if (test == "B")
        {
            document.getElementById("level").value = "BBB";
        }
        else if (test == "C")
        {
            document.getElementById("level").value = "CCC";
        }
    });
});

我的JavaScript代码仅在我的第一个模式（ID = 1）下有效。该代码不适用于所有模式。

当我使用getclassname级别值时，也不会更改，并且当我单击“更新”按钮时，即使我更改了其他模式，更新也会发生（ID = 1）。

Answer 1

尝试此代码。我用类选择器替换了ID。

<div class="modal fade" id="<?php  echo $row['ID']; ?>" role="dialog">
    <div class="modal-dialog modal-lg">
    <div class="modal-body">
        <label for="test1">Test: </label>
        <select required class="form-control selectmodel" name="test1" id="test1">
        <option selected value="<?php echo $row['test1'];?>"><?php echo $row['test1'];?></option>
        <?php 
        else if ($row['test1'] == "A")
        {                                           
            echo "<option value='B'>B</option>".
              "<option value='C'>C</option>";
        }
        if ($row['test1'] == "B")
        {                                           
            echo "<option value='A'>A</option>".
              "<option value='C'>C</option>";
        }

        else if ($row['test1'] == "C")
        {                                           
            echo "<option value='A'>A</option>".
              "<option value='B'>B</option>";
        }
        ?>
        </select>

        <label for="level">Level: </label>
        <input class="form-control levelcheck" name="level" id="level" disabled value = <?php echo $row['level']; ?>>

        <button type="submit" class="btn btn-success" name="update" >Update</button>
    </div>
    </div>
</div>

JQuery

$(document).on("change",".selectmodel",function (){
    var test = $(this).val();

    if (test == "A"){
        $(this).closest(".modal").find(".levelcheck").val("AAA");
    }else if (test == "B"){
        $(this).closest(".modal").find(".levelcheck").val("BBB");
    }else if (test == "C"){
        $(this).closest(".modal").find(".levelcheck").val("CCC");
    }
});

如何将脚本应用于所有模式弹出窗口

1 个答案: