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

del 发表于 Dev

的

以下对一种模态非常有效。但我希望它使用不同的模式，我不知道如何更改此代码来实现这一点。

有任何想法吗？

这是我的模态按钮：

<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）上。

出色地

试试这个代码。我用类选择器替换了 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>

查询

$(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");
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。