Question

我需要根据选择更改下拉列表的选项。我想使用一个选定的下拉列表。

https://harvesthq.github.io/chosen/

我做了一个小提琴，它运作良好。

问题在于我无法在我的项目中使用它。我恐怕没有把正确的东西包括在正确的地方。

那是我包含东西的方式和地点。

在标题结尾处：

<link rel="stylesheet" href="../Libs/chosen_v1.6.2/docsupport/prism.css">
<link rel="stylesheet" href="../Libs/chosen_v1.6.2/chosen.css">

在头之前的某个地方

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../Libs/chosen_v1.6.2/chosen.jquery.js" type="text/javascript"></script>
<script src="../Libs/chosen_v1.6.2/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
//HTML code that describes my elements
//JS code in a script tag with jquery

我注意到：

如果我把JS代码放在$(document).ready里面
- 它出错：Uncaught TypeError: $(...).chosen is not a function
如果它在$(document).ready之外
- 没有错误，下拉字段看起来像是一个选定的下拉列表，但它不会根据选择更改内容。
如果它在$(document).ready之外，我删除$(".chosen_class").chosen({ width:"90%"})
- 它改变了内容，但当然，它看起来不像是一个选定的下拉列表

更新：我需要一个从JS类激活的弹出窗口的下拉菜单。有很多代码，我将在这里展示相关的代码。

MyClass.prototype.showPopUp= function(){
     document.getElementById('my_div').style.display = "block";
}
<div id="my_div" style = "display:none;">
    <form>
        <select id="select1" >
            <option value=""></option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        <select id="select2" class="chosen_class" data-placeholder="Select here" multiple>
        </select>
    </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script>
$(document).ready(function () {
    $(".chosen_class").chosen({
        width:"90%"
    });
    $("#select1").change(function () {
        var letter = $(this).val();
        $('#select2').empty();
        if (letter == "A") {
            $('#select2')
                .append("<option value='letter A'>letter A</option>")
                .trigger("chosen:updated");
        } else if (letter == "B") {
            $('#select2')
                .append("<option value='letter B'>letter B</option>")
                .trigger("chosen:updated");
        } else if (letter == "C") {
            $('#select2')
                .append("<option value='letter C'>letter C</option>")
                .trigger("chosen:updated");
        }
    });
});

一切都在myFile.php中我在我的项目中包含此文件，如下所示：

           <?php require_once(ROOTPATH."/myFile.php"); ?>
     </body>
</html>

Answer 1

你应该做什么：

<!DOCTYPE html>
<html>
<head>
    <title>Your page title</title>
    <!-- Your chosen.css file -->
</head>
<body>
    <!-- Your HTML and select element to be affected here -->


    <!-- jQuery library declaration here;
    please note: this should come before your chosen JavaScript files.
    The order is very important -->
    <!-- Your chosen JavaScript files here -->
    <!-- Then, initialise chosen here so as to affect your desired element -->
</body>
</html>

总结并按要求的顺序，使用您的共享jsfiddle中的代码，并在模板时考虑您的上次更新;

这里假设您的主文件名为index.php，并且与我的名为myFile.php的文件位于同一目录级别，该文件包含您的实际代码;因此，您可以达到以下目的：

index.php 文件的内容：

<!DOCTYPE html>
<html>
<head>
    <title>Your page title</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
</head>
<body>

<?php require_once("myFile.php"); ?>
</body>
</html>

myFile.php 文件的内容：

<div id="my_div" style = "display:none;">
    <form>
        <select id="select1" >
            <option value=""></option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        <select id="select2" class="chosen_class" data-placeholder="Select here" multiple>
        </select>
    </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // All manipulation begins here.
        MyClass.prototype.showPopUp= function(){
            document.getElementById('my_div').style.display = "block";
        };

        $(".chosen_class").chosen({
            width:"90%"
        });
        $("#select1").change(function () {
            var letter = $(this).val();
            $('#select2').empty();
            if (letter == "A") {
                $('#select2')
                    .append("<option value='letter A'>letter A</option>")
                    .trigger("chosen:updated");
            } else if (letter == "B") {
                $('#select2')
                    .append("<option value='letter B'>letter B</option>")
                    .trigger("chosen:updated");
            } else if (letter == "C") {
                $('#select2')
                    .append("<option value='letter C'>letter C</option>")
                    .trigger("chosen:updated");
            }
        });
    });
</script>

请注意：出于上图的目的，假设 index.php 和 myFile.php 位于您的同一级别选定的目录。

选择下降

1 个答案: