相关疑难解决方法(0)

我试图在下拉列表中插入图像.我尝试了以下代码,但它不起作用.实现这一目标的最佳方法是什么？

 <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>

我想创建一个下拉选择,其中包含图像而不是文本作为选项.我已经完成了一些谷歌搜索并在这里搜索Stack Overflow,通常给出的答案是使用jQuery组合框.

在我看来,这个解决方案的问题在于你必须提供文本.看起来图像只是左侧文本旁边的图标.如果我错了,请纠正我,但这个解决方案不会涵盖我正在尝试做的事情 - 这完全取代了带有图像的文本.

关于我正在尝试做什么的一些背景 - 我正在尝试为用户创建一个下拉列表,以便在在线绘画/涂鸦应用上选择线条粗细.图像将是不同厚度的线条,有点像mspaint.

我知道如何使用CSS background-image属性在HTML下拉表单元素中的选项旁边显示图片.

但是,图像不会显示在所选元素上.有没有办法做到这一点(最好只使用CSS)？

编辑:

以下是列表元素的工作代码示例.但是,当关闭下拉列表时,您只能看到所选元素的文本,而不显示图像:

<select name="form[location]">
    <option value="ad" style="background: url(img/flags/ad.gif) no-repeat; padding-left: 20px;">Andorra</option>
    <option value="ae" style="background: url(img/flags/ae.gif) no-repeat; padding-left: 20px;">United Arab Emirates</option>
    <option value="af" style="background: url(img/flags/af.gif) no-repeat; padding-left: 20px;">Afghanistan</option>
    <option value="ag" style="background: url(img/flags/ag.gif) no-repeat; padding-left: 20px;">Antigua and Barbuda</option>
    <option value="ai" style="background: url(img/flags/ai.gif) no-repeat; padding-left: 20px;">Anguilla</option>
    <option value="al" style="background: url(img/flags/al.gif) no-repeat; padding-left: 20px;">Albania</option>
    <option value="am" style="background: url(img/flags/am.gif) no-repeat; padding-left: 20px;">Armenia</option>
    <option value="an" style="background: url(img/flags/an.gif) no-repeat; padding-left: 20px;">Netherlands Antilles</option>
    <option value="ao" style="background: url(img/flags/ao.gif) no-repeat; padding-left: 20px;">Angola</option>
    <option value="ar" style="background: url(img/flags/ar.gif) no-repeat; …

我试图从选择列表中的选项中嵌入一个图标.使用font-awesome图标,不显示任何图标.

<select>
    <option><i class="icon-camera-retro"></i> Doesn't work in option!</option>
</select>

我可以使用font-awesome来实现我需要的东西吗？或者我是否必须使用font-awesome废弃并为每个选项执行手动CSS背景？

JSFiddle:http://jsfiddle.net/mmXh2/1/

我有一个下拉列表.我想添加图像.我尝试在img标签内添加标签option......但仍然没有显示图像.我如何使用option标签？

我在标题上有一个下拉菜单，用于显示不同国家/地区的电话号码，并且需要在其侧面放置一个标志，但是没有标志显示，只有标志的字母表示（例如，阿根廷标志看起来像这但它显示了字母A和字母R的表情符号，因为据我所知，标志表情符号是如何工作的，我该如何逃避此攻击（在第二个电话号码中显示一个汉堡包只是为了表明表情符号确实可以在我的网站）

<select name="Telefonos" id="group">
    <option value="+543515296002">&#x1F1E6;&#x1F1F7; +54351529600
    <option value="+12398105440"> +12398105440
    <option value="+12398105440"> +12398105440
    </select>

香港专业教育学院尝试过的，无论是使用代码还是应付表情符号都行不通，即使在我编码时它也能显示出来。

这就是实际呈现的

我正在使用fontawesome,我想添加或删除所选项目的图标.所以我这样做了:http ://jsbin.com/nasixuro/7/edit(感谢@Fares M.)

JS

$(document).ready(function () {

    function format_select2_icon(opti) {
        if (!opti.id) return opti.text; // optgroup

        if ($(opti.element).data('icon') == "1") {
            return opti.text + " <i class='fa fa-check'></i>";
        } else {
            return opti.text;
        }
    }

    $("#sel").select2({
        escapeMarkup: function(m) { return m; },
        formatResult: format_select2_icon,
        formatSelection: format_select2_icon
    });

    $("#addok").click(function() {
        actual_value = $("#sel").find(':selected').text();

        if (actual_value.indexOf(" <i class='fa fa-check'></i>") > -1){
            alert("asd");
            return;
        }

        newtext = actual_value + " <i class='fa fa-check'></i>";
        $("#sel").find(':selected').text(newtext).change();
    });

  $("#removeok").click(function() {

        actual_value= …

我想我可能很密集。我想使用 Bootstrap 下拉按钮从名称列表中进行选择。我可以在纯 HTML 和/或非常简单的 jQuery 中执行此操作吗？

IE 我想使用 Bootstrap 下拉列表作为 HTML 表单select输入。

<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu1565"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select Client
    <span class="caret"></span>
</button>
<ul class="dropdown-menu" name="xx-selectClient" aria-labelledby="dropdownMenu1565">
    <li><a id="yy-lloydBrayton">Lloyd Brayton</a></li>
    <li><a id="yy-muiThreet">Mui Threet</a></li>
    <li><a id="yy-wilsonBritton"> Wilson Britton</a></li>

    <li><a id="yy-gilbertMinto">Gilbert Minto</a></li>
    <li><a id="yy-thomasinaLaney">Thomasina Laney</a></li>

我把表格放在一起看起来不错（易于使用等），然后开始清理以使其功能正常。基本的 BS“选择”相当难看，所以如果可以的话，我宁愿使用下拉列表。其他一切正常，但我对如何使用下拉列表作为选择感到困惑。

编辑：感谢 Cory 和之前的 SO 海报，这对我有用，我认为可能对其他人有帮助

<script>
$(".dropdown-menu a").click(function(){
var selectId = $(this).attr('id')
    $('#formId').submit(function(eventObj) {
        $(this).append("<input type='hidden' name='selectClient' value="+selectId+"/> ");
        return true;
    });
})
</script>

如果您希望文本不是idthen，请在第三行中使用：

var …

我正在处理 symfony 项目，我想在表单中添加下拉列表。下拉列表应仅包含没有任何文本的图标。我尝试使用这样的选择选项：

<select class="form-control" name="category">
    <option value="">
        <a class="category-icon icon-bed"></a>
    </option>
    <option value="">
        <i class="fa fa-wrench fa-fw"></i>
    </option>
    <option value="">
        <i class="fa fa-wrench fa-fw"></i>
    </option>
</select>

但它不显示任何图标。我怎样才能做到这一点？谢谢

Bootstrap 4 选择添加图像缩略图的选项不起作用，有什么解决方案吗？

谢谢

 <select class="form-control" id="exampleFormControlSelect1">
          <option><img src="/assets/images/platform/abs.png">ABS-01</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>

我有这个脚本

<select>
<option value="1">one<img src="star.gif" height="15" width="15"></img> </option>
</select>

但它不起作用.如何将图像放入选中？谢谢

更新:

所以这是不可能的？:(也许通过javascript？...

我想在选择框的选项中显示图像.我怎么能在CHROME的javascript/jquery中做到这一点.

<select>
    <option>image text</option>
</select>

我有一个php循环,我试图在select选项标签内回显HTML图像源,如下所示:

foreach($recs as $i){
    if($i->isscripted == 1){
      $is = "<img src='greencheck.gif'>"; 
    }else{
      $is = "<img src='redbang.gif'>"; 
    }

   echo "<option value=".$i->id.">".$is."  ".$i->fullname."</option>";
}

图像未显示在选择列表中.我测试了循环外部的图像标签,它显示正常.

echo "<img src='greencheck.gif'>";