选择下拉答案

【问题标题】：Chosen drop down选择下拉
【发布时间】：2016-12-19 10:11:10
【问题描述】：

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

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

我做了一个小提琴，效果很好。

问题是我无法让它在我的项目中工作。恐怕我没有把正确的东西放在正确的地方。

这就是我包含内容的方式和位置。

head 标签的末尾：

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

【问题讨论】：

当你写你添加对 jquery 库的引用时，你是什么意思？它应该是 head 部分的一部分，或者更好的是，就在 body 部分的关闭之前（

标签： javascript jquery html jquery-chosen

【解决方案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 在您选择的目录中位于同一级别。

【讨论】：

我尊重您的指导方针，结果看起来像是一个选择的下拉菜单，但它不会像 select1 所说的那样更新选项。我在 body 标记的末尾插入了我的代码（按此顺序：HTML、jquery 库、选择的 JS 文件、我的 JS 代码、选择的初始化）。你知道为什么在$(document).ready 中选择初始化是错误的吗？
根据我的建议，刚刚用您共享的 jsfiddle 中的插图更新了我的答案；您可以简单地复制并粘贴它以进行测试。
@Newbie：希望您现在可以在您的项目中使用它！如果没有，您面临什么挑战？
我检查了一下，还是一样的。如果我使用您答案中的代码，我会收到此错误：jquery.min.js:2 Uncaught TypeError: $(...).chosen is not a function at HTMLDocument.<anonymous> 如果我在外部使用 JS 代码 $(document).ready 我没有错误，但 select2 没有任何选项。
@Newbie：如果按照上面的方式实现，正常情况下应该不会报错。你介意用你的代码的样子更新你的帖子（当你收到Uncaught TypeError: $(...).chosen is not a function错误时）？