web-dev-qa-db-ja.com

ドロップダウンリストにオプション付きの画像を配置する

ドロップダウンリストに画像を挿入しようとしていました。次のコードを試しましたが、動作しません。これを達成する最良の方法は何ですか？

 <select>
  <option value="volvo"><IMG src="a.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Volvo</option>
  <option value="saab"><IMG src="b.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Saab</option>
  <option value="mercedes"><IMG src="c.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Mercedes</option>
  <option value="audi"><IMG src="d.jpg"HEIGHT="15" WIDTH="15" BORDER="0"align="center">Audi</option>
  </select>
htmlhtml-select
48
Judy

このコードはFirefoxでのみ動作します：

<select>
    <option value="volvo" style="background-image:url(images/volvo.png);">Volvo</option>
    <option value="saab"  style="background-image:url(images/saab.png);">Saab</option>
    <option value="honda" style="background-image:url(images/honda.png);">Honda</option>
    <option value="audi"  style="background-image:url(images/audi.png);">Audi</option>
</select>

編集（2018年4月）：

Firefoxはこれをもうサポートしていません。

19
JiBKas

プレーンHTMLではできませんが、jQueryでできます。

JavaScript画像のドロップダウン

古いファッションのドロップダウンに疲れていますか？この新しいものを試してください。画像コンボボックス。各オプションでアイコンを追加できます。既存の「選択」要素で動作するか、JSONオブジェクトで作成できます。

19
Nick

これはまさにあなたが必要とするものです。こちらで実際にご覧ください 8FydL/445

以下の例のコード：

CSS：

.desc { color:#6b6b6b;}
.desc a {color:#0092dd;}

.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url('http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/arrow.png') no-repeat scroll right center; display:block; padding-right:20px;
                border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
                  left:0px; padding:5px 0px; position:absolute; top:2px; width:auto; min-width:170px; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}

.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}

JS：

 $(".dropdown img.flag").addClass("flagvisibility");
    $(".dropdown dt a").click(function() {
        $(".dropdown dd ul").toggle();
    });

    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a span").html(text);
        $(".dropdown dd ul").hide();
        $("#result").html("Selected value is: " + getSelectedValue("sample"));
    });

    function getSelectedValue(id) {
        return $("#" + id).find("dt a span.value").html();
    }

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (! $clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });

    $(".dropdown img.flag").toggleClass("flagvisibility");

およびデモのHTML：

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <dl id="sample" class="dropdown">
        <dt><a href="#"><span>Please select the country</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/br.png" alt="" /><span class="value">BR</span></a></li>
                <li><a href="#">France<img class="flag" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/reinventing-drop-down/fr.png" alt="" /><span class="value">FR</span></a></li>

            </ul>
        </dd>
    </dl>
    <span id="result"></span>
10
Giannis Grivas

皆さん、このBootstrapドロップダウンが機能するようになりました。現在選択されている画像を保持するために、クリックイベントをわずかに変更しました。そして、ご覧の通り、米ドル通貨がデフォルトで選択されています：

<div class="btn-group" style="margin:10px;">    <!-- CURRENCY, BOOTSTRAP DROPDOWN -->
                <!--<a class="btn btn-primary" href="javascript:void(0);">Currency</a>-->                    
                <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><img src="../../Images/flag-usd-small.png"> USD <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-aud-small.png" /> AUD</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-cad-small.png" /> CAD</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-cny-small.png" /> CNY</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-gbp-small.png" /> GBP</a>
                    </li>
                    <li><a href="javascript:void(0);">
                        <img src="../../Images/flag-usd-small.png" /> USD</a>
                    </li>
                </ul>
            </div>


/* BOOTSTRAP DROPDOWN MENU - Update selected item text and image */
$(".dropdown-menu li a").click(function () {
    var selText = $(this).text();
    var imgSource = $(this).find('img').attr('src');
    var img = '<img src="' + imgSource + '"/>';        
    $(this).parents('.btn-group').find('.dropdown-toggle').html(img + ' ' + selText + ' <span class="caret"></span>');
});
7
bob.mazzo

あなたはCSSを使用してそれを達成する必要があります

http://binnyva.blogspot.com/2006/01/icons-for-select-menu-options-in.html

7
Sarwar Erfan

次のコードをチェックアウトして実行します。それはあなたを助けるでしょう...

 $( function() {
    $.widget( "custom.iconselectmenu", $.ui.selectmenu, {
      _renderItem: function( ul, item ) {
        var li = $( "<li>" ),
          wrapper = $( "<div>", { text: item.label } );
 
        if ( item.disabled ) {
          li.addClass( "ui-state-disabled" );
        }
 
        $( "<span>", {
          style: item.element.attr( "data-style" ),
          "class": "ui-icon " + item.element.attr( "data-class" )
        })
          .appendTo( wrapper );
 
        return li.append( wrapper ).appendTo( ul );
      }
    });
 
    $( "#filesA" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons" );
 
    $( "#filesB" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget" )
        .addClass( "ui-menu-icons customicons" );
 
    $( "#people" )
      .iconselectmenu()
      .iconselectmenu( "menuWidget")
        .addClass( "ui-menu-icons avatar" );
  } );
  </script>
  <style>
    h2 {
      margin: 30px 0 0 0;
    }
    fieldset {
      border: 0;
    }
    label
{
      display: block;
    }
 
    /* select with custom icons */
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
      padding: 0.5em 0 0.5em 3em;
    }
    .ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
      height: 24px;
      width: 24px;
      top: 0.1em;
    }
    .ui-icon.video {
      background: url("images/24-video-square.png") 0 0 no-repeat;
    }
    .ui-icon.podcast {
      background: url("images/24-podcast-square.png") 0 0 no-repeat;
    }
    .ui-icon.rss {
      background: url("images/24-rss-square.png") 0 0 no-repeat;
    }
 
    /* select with CSS avatar icons */
    option.avatar {
      background-repeat: no-repeat !important;
      padding-left: 20px;
    }
    .avatar .ui-icon {
      background-position: left top;
    }
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Custom Rendering</title>
  
</head>
<body>
 
<div class="demo">
 
<form action="#">
  <h2>Selectmenu with framework icons</h2>
  <fieldset>
    <label for="filesA">Select a File:</label>
    <select name="filesA" id="filesA">
      <option value="jquery" data-class="ui-icon-script">jQuery.js</option>
      <option value="jquerylogo" data-class="ui-icon-image">jQuery Logo</option>
      <option value="jqueryui" data-class="ui-icon-script">ui.jQuery.js</option>
      <option value="jqueryuilogo" selected="selected" data-class="ui-icon-image">jQuery UI Logo</option>
      <option value="somefile" disabled="disabled" data-class="ui-icon-help">Some unknown file</option>
    </select>
  </fieldset>
 
  <h2>Selectmenu with custom icon images</h2>
  <fieldset>
    <label for="filesB">Select a podcast:</label>
    <select name="filesB" id="filesB">
      <option value="mypodcast" data-class="podcast">John Resig Podcast</option>
      <option value="myvideo" data-class="video">Scott González Video</option>
      <option value="myrss" data-class="rss">jQuery RSS XML</option>
    </select>
  </fieldset>
 
  <h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
  <fieldset>
    <label for="people">Select a Person:</label>
    <select name="people" id="people">
      <option value="1" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>
      <option value="2" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&amp;r=g&amp;s=16&apos;);">Tauren Mills</option>
      <option value="3" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&amp;r=g&amp;s=16&apos;);">Jane Doe</option>
    </select>
  </fieldset>
</form>
 
</div>
 
 
</body>
</html>
6
Sachin Sanchaniya

ここでクロスブラウザ互換のJQueryプラグインを見つけました。

http://designwithpc.com/Plugins/ddSlick

このシナリオでおそらく役立つでしょう。

6
Clain Dsilva