首页 > 解决方案 > 带有 JQuery 的 prestashop 中带有搜索栏的下拉菜单

问题描述

我正在尝试在 prestashop 中使用 JQUERY 制作带有搜索栏的下拉菜单。下拉菜单从数据库中获取数据,但没有出现搜索栏。这是我的代码:

 $sql = "SELECT id_category, name FROM ps_category_lang";
        $result = $conn->query($sql);
        
        if ($result->num_rows > 0) {
            $html.="<select class='chosen' id='chosen'>";
          while($row = $result->fetch_assoc()) {
           $id = $row["id_category"];
           $name = $row["name"];
           $html.= "<option value='$id'>$id - $name</option>";
          }
          $html.="</select>";
        } 
        else 
        {
            $html .="<p>0 result</p>";
        }
        $conn->close();

这是javascript:

<script type="text/javascript">
      $(".chosen").chosen();
</script>

这是我调用的函数:

<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
</head>

这就是它的样子:

在此处输入图像描述

这就是它的样子

在此处输入图像描述

任何建议都会很棒,提前谢谢你。

标签: javascriptphpjqueryprestashop-1.7

解决方案


我发现你的问题你应该把javascript代码放在部件下面,这样它才能工作。

$sql = "SELECT id_category, name FROM ps_category_lang"; $result = $conn->查询($sql);

        if ($result->num_rows > 0) {
            $html.="<select class='chosen' id='chosen'>";
          while($row = $result->fetch_assoc()) {
           $id = $row["id_category"];
           $name = $row["name"];
           $html.= "<option value='$id'>$id - $name</option>";
          }
          $html.="</select>";
           **$html.= "<script type='text/javascript'>
          $('.chosen').chosen();
         </script>";**
        } 
        else 
        {
            $html .="<p>0 result</p>";
        }
        $conn->close();

推荐阅读