Javascript函数不适用于Chosen插件
[英]Javascript function not working with Chosen plugin
问题描述
我设计了两个表，第一个没有选择的表，第二个没有选择的表。 第一张表正是我希望第二张起作用的方式。 用户在第一个下拉列表中进行选择，然后出现第二个下拉列表。 然后，用户在第二个下拉列表中进行选择，第三个出现。
我在第一个表和第二个表中使用了相同的功能，第二个表中唯一的补充是将Chosen类添加到select标记中。 为什么选择的下拉菜单没有隐藏？ 另外，为什么函数过程没有像在第一个表中那样，在上一个选择之后显示了下一个下拉菜单？ 就像我说的那样，我希望两个表功能相同，第二个表仅具有选择的格式。 非常感谢！
<!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({ disable_search_threshold: 4 }); }); </script> <script> function hide() { document.getElementById("t1").style.display = "none"; document.getElementById("t2").style.display = "none"; document.getElementById("p1").style.display = "none"; document.getElementById("p2").style.display = "none"; } function onClick1(){ document.getElementById("t1").style.display = "block"; } function onClick2(){ document.getElementById("t2").style.display = "block"; } function onSelect1(){ document.getElementById("p1").style.display = "block"; } function onSelect2(){ document.getElementById("p2").style.display = "block"; } </script> <style type="text/css"> </style> </head> <body onload="hide()"> <table> <tr> <td> <select onclick="onClick1()"> <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 id="t1" onclick="onClick2()"> <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 id="t2"> <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> <table> <tr> <td> <select class="chosen-select" onclick="onSelect1()"> <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" id="p1" onclick="onSelect2()"> <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" id="p2"> <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>
1 个解决方案
解决方案1
2 已采纳 2018-07-05 16:56:28
在对元素调用.chosen()之前，您要隐藏它们。 这可能会导致多个UI库出现问题（即jQueryUI按钮，以及您所选择的情况）。 让.chosen()运行， 然后调用hide() ，就不会有任何问题（从样式上）。
从功能.chosen()这里的另一个问题是.chosen()隐藏了<select>元素，因此不再触发您的单击处理程序。 您需要设置单击处理程序并显示/隐藏<select>的父级 ，因为.chosen()在<td>中放置了一个<div>结构，该结构最终成为新的选择列表。 这是完成此操作的方法：
<!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({ disable_search_threshold: 4 }); function hide() { $("#p1").parent().hide(); $("#p2").parent().hide(); } // call hide AFTER .chosen() has been invoked on the visible elements hide(); }); </script> <script> function onSelect1(){ $("#p1").parent().show(); } function onSelect2(){ $("#p2").parent().show(); } </script> <style type="text/css"> </style> </head> <!-- Do not call hide() on body load --> <body> <table> <tr> <td onclick="onSelect1()"> <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 onclick="onSelect2()"> <select class="chosen-select" id="p1" > <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" id="p2"> <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>
AngularJS选择了插件，选择：更新不起作用，在浏览器中工作
[英]AngularJS chosen plugin, chosen:updated not working, works in browser
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.