jQuery-日期选择器和可搜索的下拉插件之间的冲突

Question

在页面上，我有一个下拉列表，其中带有<select>和日期的<input>表单。

下拉列表：

echo "<td>";
        $sql = "SELECT DISTINCT userName FROM users";
        $result = mysqli_query($link, $sql);

        echo "<select id='myselect' name='userName'>";
        echo "<option selected='selected' value='' disabled='disabled'></option>";
            while ($row = mysqli_fetch_array($result)) {
            if (isset($row['userName'])) {      
            echo "<option value='" . $row['userName'] . "'>" . $row['userName'] . "</option>";
            }
        }
        echo "</select>
        </td>

日期形式：

        <td>
        <input type='text' class='datepicker' name='entryDate'>
        </td>

对于日期输入表单，您可以看到我有一个jQuery datepicker插件，声明如下：

<script src='../jquery/jquery-1.12.4.js'></script>
<script src='../jquery/jquery-ui.js'></script>
<script>
    $(function() {
    $(".datepicker").datepicker({dateFormat:"yy-mm-dd"});
    });
</script>

这个工作很好，但是后来我想添加一个jQuery插件以使下拉列表可搜索。 我找到了这个插件，并像这样添加了它：

<script type="text/javascript" src="../plugins/sh/shCore.js"></script>
<script type="text/javascript" src="../plugins/sh/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="../plugins/sh/shCore.css"/>
<link type="text/css" rel="stylesheet" href="../plugins/sh/shThemeDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>
<!-- END syntax highlighter -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/jquery.searchabledropdown-1.0.8.min.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
        $("select").searchable();
    });


    // demo functions
    $(document).ready(function() {
        $("#value").html($("#myselect :selected").text() + " (VALUE: " + $("#myselect").val() + ")");
        $("select").change(function(){
            $("#value").html(this.options[this.selectedIndex].text + " (VALUE: " + this.value + ")");
        });
    });

    function modifySelect() {
        $("select").get(0).selectedIndex = 5;
    }

    function appendSelectOption(str) {
        $("select").append("<option value=\"" + str + "\">" + str + "</option>");
    }

    function applyOptions() {             
        $("select").searchable({
            maxListSize: $("#maxListSize").val(),
            maxMultiMatch: $("#maxMultiMatch").val(),
            latency: $("#latency").val(),
            exactMatch: $("#exactMatch").get(0).checked,
            wildcards: $("#wildcards").get(0).checked,
            ignoreCase: $("#ignoreCase").get(0).checked
        });

        alert(
            "OPTIONS\n---------------------------\n" + 
            "maxListSize: " + $("#maxListSize").val() + "\n" +
            "maxMultiMatch: " + $("#maxMultiMatch").val() + "\n" +
            "exactMatch: " + $("#exactMatch").get(0).checked + "\n"+
            "wildcards: " + $("#wildcards").get(0).checked + "\n" +
            "ignoreCase: " + $("#ignoreCase").get(0).checked + "\n" +
            "latency: " + $("#latency").val()
        );
    }
</script>

添加可搜索的下拉列表插件<select id='myselect' name='userName'> ，下拉列表可按预期进行搜索，但日期选择器停止工作。 我注意到，如果我从html <head>删除了可搜索的下拉列表插件的声明，则datepicker再次起作用。

这两个插件有何冲突？ 有什么解决办法吗？

Answer 1

找到了解决方案：

jQuery使用$符号作为jQuery的快捷方式，这可能与其他也使用$符号的脚本产生冲突。

该解决方案来自jQuery noConflict（）方法：

我替换了这个：

$(function() {
    $(".datepicker").datepicker({dateFormat:'yy-mm-dd'});
    });

有了这个：

$.noConflict();
jQuery(document).ready(function($){
$(function() {
    $(".datepicker").datepicker({dateFormat:'yy-mm-dd'});
    });
});

有关noConflict方法的更多详细信息： noConflict方法

jQuery-日期选择器和可搜索的下拉插件之间的冲突

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-03-30 10:52:08

jQuery-日期选择器和可搜索的下拉插件之间的冲突

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-30 10:52:08

解决方案1
0 已采纳 2017-03-30 10:52:08