javascript - 选择 jQuery 插件的麻烦
问题描述
我试图将 Chosen 的插件集成到我的 HTML 中以增加下拉功能。我添加了指向 Chosen 样式表、jQuery 和 Chosen 的 JQuery 的链接。此外,我通过 jQuery 创建了一个类以包含在我的标签中。关于它为什么不起作用的任何想法?
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("chosen-select").chosen();
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table>
<tr>
<td>
<select class="chosen-select">
<option value="" disabled selected>Title</option>
<option value="clean">Clean</option>
<option value="salvage">Salvage</option>
<option value="rebuilt">Rebuilt</option>
</select>
</td>
<td>
<select class="chosen-select">
<option value="" disabled selected>Title Status</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
</select>
</td>
<td>
<select class="chosen-select">
<option value="" disabled selected>Title Stat</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
<option value="ralph jr.">Missing</option>
<option value="ralph">Missing</option>
</select>
</td>
</tr>
</table>
</body>
</html>
解决方案
现在它的工作正常。您错过.
了脚本,这就是它不起作用的原因。
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".chosen-select").chosen();
});
</script>
<style type="text/css">
</style>
</head>
<body>
<table>
<tr>
<td>
<select class="chosen-select">
<option value="" disabled selected>Title</option>
<option value="clean">Clean</option>
<option value="salvage">Salvage</option>
<option value="rebuilt">Rebuilt</option>
</select>
</td>
<td>
<select class="chosen-select">
<option value="" disabled selected>Title Status</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
</select>
</td>
<td>
<select class="chosen-select">
<option value="" disabled selected>Title Stat</option>
<option value="in hand">In Hand</option>
<option value="lien">Lien</option>
<option value="missing">Missing</option>
<option value="ralph jr.">Missing</option>
<option value="ralph">Missing</option>
</select>
</td>
</tr>
</table>
</body>
</html>
推荐阅读
- python - 按钮点击功能与postgresql连接
- javascript - 试图从 Pinterest “嵌入 pin” 中删除标题和个人资料
- google-apps-script - 使用参数范围调用脚本函数
- sockets - 通过 VPN 发送欺骗的 UDP 数据包
- typescript - 接口的重载方法不能接受联合类型:“没有重载匹配此调用”
- browser - 本地浏览器到浏览器与 Web RTC 的通信
- google-analytics - Google Analytics / Data Studio - 在处理数据之前从 URL 中间删除字符串
- python - 在python中生成xml文件时,输出中没有空格
- java - 如何使用springboot java检查thymleaf html中的对象是否存在?在 thymleaf 中的 null 上找不到属性或字段“numBrothers”
- javascript - Azure AD B2C - 拒绝注入的 HTML