<select> <option>里头为啥不能放<img src='imagePath' />

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了<select> <option>里头为啥不能放<img src='imagePath' />相关的知识,希望对你有一定的参考价值。

参考技术A select 里面只能是option.
带图片的下拉菜单都是用javascript模拟的。网上有类似的代码。一搜就可以搜到本回答被提问者采纳

jquery 如何去除select 控件重复的option

比如
<select >
<option>1 </option>
<option>1 </option>
<option>2 </option>
<option>2 </option>
<option>3</option>
</select>

要变成
<select >
<option>1 </option>
<option>2 </option>
<option>3</option>
</select>
如何做,请给个示例

这个问题最好应该在后台中处理掉——创建select元素之前就过滤掉重复的元素。如果必须要在页面中处理,方法也比较多,这里提供一个使用jquery选择器 :contains 的方法:

$(":contains(text)");  // 选取包含指定字符串的元素

这样就可以选出包含重复字符串的option元素,然后将其删掉

示例代码如下

    创建Html元素

    <div class="box">
    <span>点击按钮删除select控件中的重复元素:</span><br>
    <div class="content">
    <select >
    <option>1</option>
    <option>1</option>
    <option>2</option>
    <option>2</option>
    <option>3</option>
    </select>
    </div>
    <input type="button" value="删除重复项">
    </div>

    设置css样式

    div.boxwidth:300px;padding:20px;margin:20px;border:4px dashed #ccc;
    div.box spancolor:#999;font-style:italic;
    div.contentwidth:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;
    selectwidth:150px;height:30px;margin:5px 0;border:1px solid #6699FF;
    input[type='button']height:30px;margin:10px;padding:5px 10px;

    编写jquery代码

    $(function()
    $(":button").click(function() 
    $("select option").each(function() 
    text = $(this).text();
    if($("select option:contains("+text+")").length > 1)
    $("select option:contains("+text+"):gt(0)").remove();
    );
    );
    )

    观察效果

    初始状态

    点击按钮删除重复项之后

参考技术A 1.遍历option值是否存在,有删除节点
2.将所有的值放入数组去除重复数据,再更新select子节点
参考技术B $("select").each(function(i,n)
var options = "";
$(n).find("option").each(function(j,m)
if(options.indexOf($(m)[0].outerHTML) == -1)

options += $(m)[0].outerHTML;

);
$(n).html(options);
);
这个是循环所有select,查找每个select,并重新给select的html赋值本回答被提问者和网友采纳
参考技术C <!-- 徐士刚jquery实现异步三级联动 -->
<script type="text/javascript">
var flagflag = false;
$(function()
$.post("dropdownlist!selectAllProvinceCityTown.action",function(data)
var json=eval(data);
for(var i = 0,len = json.length; i<len; i++)
if($==json[i].id)
$('#cityid').empty();
$('#cityid').append("<option value=\"\">---请选择---</option>");
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
$('#provinceid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
querycitybyprovince();



else

$('#provinceid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));


,"json");

$('#provinceid').change(function()
$('#cityid').empty();
$('#cityid').append("<option value=\"\">---请选择---</option>");
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
querycitybyprovince();
);
);
function querycitybyprovince()

var provinceid = document.getElementById('provinceid').value;
if(provinceid==1)

provinceid = -1;

$.post("dropdownlist!selectAllProvinceCityTown.action",,function(data)

var json=eval(data);

for(var i = 0,len = json.length; i<len; i++)
if($==json[i].id)
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
$('#cityid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));
querytownbycity();


else
$('#cityid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));



$('#cityid').change(function()
//clearOptions(document.getElementById('townid'));
//$('#townid').empty();
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
querytownbycity();
,"json");
);


function querytownbycity()


var cityid = document.getElementById('cityid').value
$.post("dropdownlist!selectAllProvinceCityTown.action",,function(data)

var json=eval(data);
$('#townid').empty();
$('#townid').append("<option value=\"\">---请选择---</option>");
for(var i = 0,len = json.length; i<len; i++)
if($==json[i].id)
$('#townid').append($("<option value='"+json[i].id+"' selected='selected'>"+json[i].name+"</option>"));

else
$('#townid').append($("<option value='"+json[i].id+"'>"+json[i].name+"</option>"));



,"json");


页面端:
<select name="provinceid" class="bk_01" id="provinceid"
style="WIDTH: 120px">
<option value="1">
---请选择---
</option>
</select>
<select name="cityid" class="bk_01" id="cityid"
style="WIDTH: 120px">
<option value="">
---请选择---
</option>
</select>
<select name="townid" class="bk_01" id="townid"
style="WIDTH: 120px">
<option value="">
---请选择---
</option>
</select>
希望对你有帮助,希望及时采纳,谢谢!

以上是关于<select> <option>里头为啥不能放<img src='imagePath' />的主要内容,如果未能解决你的问题,请参考以下文章

如何设置select和option的文字居中

将 html <select> 和 <option> 重新编码为 vuetify <v-select>

如何选中select中的所有option

select option知识

怎么改变select标签的option列表选项的颜色

jquery如何点击页面,使select 的下拉框自动弹出?