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'>后，下拉列表可按预期搜索，但是datepicker停止工作。我注意到如果我从html <head>删除可搜索下拉列表插件的声明，则datepicker再次工作。

这两个插件有什么冲突吗？还有什么解决方案吗？

Answer 1

找到解决方案：

jQuery使用$ sign作为jQuery的快捷方式，这可能会导致与使用$符号的其他脚本发生冲突。

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

我取而代之：

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

有了这个：

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

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

jQuery - datepicker和可搜索的下拉插件之间的冲突

1 个答案: