select2 下拉框与 jQuery 日期选择器不兼容？

Posted 2023-02-25

【中文标题】select2 下拉框与 jQuery 日期选择器不兼容？

【英文标题】：select2 drop down box incompatible with jQuery date picker?

【发布时间】：2014-12-07 15:37:19

【问题描述】：

我有一个简单的表单域，其中有可搜索的下拉框，后跟带有 datepicker() 的日期输入域。对于 select2，我有以下脚本：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<script>
$(document).ready(function()  $("#e22").select2(
placeholder: "Select a Pet",
allowClear: true
); );
</script>    

对于日期选择器，我有：

<script>
function datepickerinit()

$("#payment_date").datepicker();
$("#order_provided_date").datepicker();
$("#order_date").datepicker();                      

</script> 

如果我在下拉列表中有第一个带有 jquery 源的脚本，它似乎可以工作，但会禁用日期选择器，反之亦然。我对此很陌生，我确信我只是在错误的地方放了一些东西。头部位于包含 header.php 文件中，如果我将脚本放在那里，下拉菜单不起作用，因此脚本位于正文中。有没有办法同时拥有 select2 可搜索下拉框和日期选择器输入？

【问题讨论】：

试试这个：$(document).ready( function() $("#e22").select2( placeholder: "Select a Pet", allowClear: true ); $("#payment_date").datepicker(); $("#order_provided_date").datepicker(); $("#order_date").datepicker(); );

感谢您的帮助；我将第一个对 jquery 的脚本引用放在了 head 部分，它现在可以工作了。我想我一定有一个旧的 jquery 文件，它一定是不兼容的。

【参考方案1】：

使用 datepicker 和 select2 引用 jsFiddle 代码。希望这会有所帮助。

html：

<p>Date:
    <input id="datepicker" type="text"/> 
    <input type="hidden" id="test" />
</p>

JS：

$(document).ready(function()

$("#datepicker").datepicker();     
var test = $('#test');
$(test).select2(
    data:[
        id:0,text:"enhancement",
        id:1,text:"bug",
        id:2,text:"duplicate",
        id:3,text:"invalid",
        id:4,text:"wontfix"
    ],
    width: "300px"
);

);