電子論理ゲート

Question

は、私は私がすべてのフラグと表示部分だけで1枚の画像とそれを実現するHTTPリクエストを下げるために、コンテンツCountryflag +国名

とドロップダウンメニュー（HTMLのselectオプションを）したいですそれから。

私はそれが同じように動作し、オプションリストでHTMLフォームがなければ https://www.flag-sprites.com/de/

このストライプを使用

：私はそれを行う場合

<img src="blank.gif" class="flag flag-cz" alt="Czech Republic" /> 

しかし

<option><img src="blank.gif" class="flag flag-cz" alt="Czech Republic" /> Czech Republic</option> 

も

を禁止されていますこのように：

<option class="flag flag-cz">Czech Republic</option> 

それは私がここ

は以下のように見えるべきかの例で望む結果得られません。 http://find-onlinecontacts.com

Answer 1

あなたのサイズと名前方法でSELECTタグを使用することができます

Answer 2

何をこのアプローチについてそれは選択と同じですが、簡単に推理することができます。

$("document").ready(function() { 
 
    $(".option").click(function() { 
 
    $(".option").slideDown(); 
 
    }); 
 

 
    $(".option:not(.selected)").click(function() { 
 
    $(".option:not(.selected)").slideUp(); 
 

 
    $(".option.selected").text($(this).text()) 
 
    $("#selectVal").val($(this).data("value")) 
 
    }); 
 

 

 

 

 
});

li { 
 
    list-style: none 
 
} 
 

 
.option { 
 
    display: none 
 
} 
 

 
.option:first-child { 
 
    display: block 
 
} 
 

 
.option:not(.selected):hover { 
 
    background: red 
 
} 
 

 
#select { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    cursor: pointer 
 
} 
 

 
#select img{width:30px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="select"> 
 
    <li class="option selected">--</li> 
 
    <li class="option" data-value="0"><img src="http://www.flags.net/images/largeflags/SPAN0002.GIF" alt=""/>Spain</li> 
 
    <li class="option" data-value="1"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/255px-Flag_of_Portugal.svg.png" alt=""/>Portugal</li> 
 
    
 
</ul> 
 
<input id="selectVal" type="hidden" value="" />