Question

您好我正在尝试用图片下拉。这就是为什么我想使用ddSlick（一个jQuery插件），它可以为我实现。不幸的是它不起作用。但我已按照插件的说明进行操作。我尝试过以下方法：

template_head.blade.php（包含jquery.ddslick.min.js文件）

 <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Offerte tool</title>
      <!-- Bootstrap -->
      {{HTML::style('css/bootstrap.min.css')}}
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      {{ HTML::script('js/bootstrap.min.js') }}
      <!-- To use less I have to include my own css first and then the less library. Because I have read the following in less.org:Make sure you include your stylesheets before the script.) -->
      <link rel="stylesheet/less" type="text/css" href="{{ asset('css/core.less') }}" />

      <script src="{{ asset('js/less-1.7.5.min.js') }}" type="text/javascript"></script>
      <script src="{{ asset('js/bootstrap-rating-input.min.js') }}" type="text/javascript"></script>
      <script src="{{ asset('js/jquery.ddslick.min.js') }}" type="text/javascript"></script>
       {{HTML::script('js/application.js')}}

user.blade.php（有一个下拉列表）

<!DOCTYPE html>
<html lang="en">
   <head>
    @include('user._layouts.template_head')
   </head>
    <script>
      $('#myDropdown').ddslick({
    onSelected: function(selectedData){
        //callback function: do something with selectedData;
         $('#demo-htmlselect').ddslick();
      }   
    });
    </script>

   <body>
      <select id="demo-htmlselect">
        <option value="0" data-imagesrc="{{ asset('images/orange.png') }}"
            data-description="Description with Facebook">Facebook</option>
        <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png"
            data-description="Description with Twitter">Twitter</option>
        <option value="2"  data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png"
            data-description="Description with LinkedIn">LinkedIn</option>
        <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png"
            data-description="Description with Foursquare">Foursquare</option>
    </select>
   </body>
</html>

在user.blade.php中，您可以看到以下内容：

  <option value="0" data-imagesrc="{{ asset('images/orange.png') }}"

所以你能看到我有一个应该在下拉列表中显示的图像。但它没有你在这里看到的那样：

link：http://i.imgur.com/9k3PZBZ.png

image orange.png看起来像这样：

link：http://i.imgur.com/kbxyS4H.png

我还测试了我的webapplication是否与jquery.ddslick.min.js文件建立了连接。它确实建立了联系。在这里你可以看到它的截图：

link：http://i.imgur.com/Bpu4dKK.png

有人可以帮帮我吗？我在等你的回复。无论如何，谢谢你的回答。

Answer 1

这只是一个疯狂的猜测，但你可能需要将你的js代码包装在$(document).ready()中。这确保了DOM中的所有元素都存在，插件可以正确初始化。

$(document).ready(function(){
    $('#demo-htmlselect').ddslick();
});

编辑：您也不需要所有#myDropdown内容

Answer 2

<script>
  $('#demo-htmlselect').ddslick({
onSelected: function(selectedData){
    //callback function: do something with selectedData;
     $('#demo-htmlselect').ddslick();
  }   
});
</script>

您需要提供下拉ID而不是myDropdown。然后在onSelected函数中，如果需要，可以使用所选数据进行操作。

ddSlick包括但不起作用

2 个答案: