電子邏輯門

-4

我希望有一個下拉菜單（HTML選擇選項）與內容Countryflag +站點名稱：電子邏輯門

要降低我想與所有的標誌和顯示只是一個部分1倍的圖像來實現它的http請求從中。

沒有用選項列表HTML形式，它的工作原理是：

<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

來源

2017-02-28 vc0

爲什麼標題「電子邏輯門」的時候，問題有沒有任何事情與他們無關？ – Dmitri

我對標題也很好奇 –

我沒有在您發佈的示例網址上看到任何標誌。 – Turnip

-2

您可以使用SELECT標籤，大小和名稱方法

來源

2017-02-28 15:34:04

你不能把圖像放在一個簡單的選擇 –

也許是國旗的表情符號 –

歡迎來到這裏，謝謝你參與問題。由於在這裏發佈的每個答案都可能由許多用戶閱讀[＆學習]，請確保您確實有足夠的信息來回答特定的問題。無論如何，作爲第一個，你可以在這裏回顧[這個問題的正確答案]（http://stackoverflow.com/questions/2965971/how-to-add-a-images-in-select-list#answer- 2966006） – NDFA

什麼關於這種方法。它的行爲和選擇一樣，但你可以輕鬆地熟悉它。

$("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="" />

來源

2017-02-28 15:45:12

回答

相關問題