电子逻辑门

-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

回答

相关问题