在一个页面上，我有一个下拉列表，其中包含<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日期选择器插件，声明如下：
<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(
"OPTIONSn---------------------------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>日期选择器会再次工作。
这两个插件冲突有什么原因吗？有什么解决方案吗？
找到了解决方案：
jQuery 使用 $ 符号作为 jQuery 的快捷方式，这可能会导致与同样使用 $ 符号的其他脚本发生冲突。
解决方案来自 jQuery noConflict(( 方法：
我替换了这个：
$(function() {
$(".datepicker").datepicker({dateFormat:'yy-mm-dd'});
});
有了这个：
$.noConflict();
jQuery(document).ready(function($){
$(function() {
$(".datepicker").datepicker({dateFormat:'yy-mm-dd'});
});
});
的更多详细信息：无冲突方法