在 jQuery 中列表中的每一行前面添加一个删除图标

add a delete icon in front of each row in list in jquery

本文关键字：添加 一个 图标 删除 前面 列表 jQuery 一行      更新时间：2023-09-26

>我有一个列表控件，在运行时将数据绑定到控件时，我想在jquery中的每一行附加一个删除图标或按钮，以便我可以根据需要删除一行。 下面是我用来将数据绑定到控件的代码。 

$(response.aaData).each(function (index, val) { 
    $("#multiselectSubCat")
        .append($('<option></option>').val(val.SubCategoryId).html(val.SubCategoryName)); 
});

呈现

<select name="from" id="multiselectSubCat" multiple="multiple" style="width: 300px; top: 100px">
 <option value="9">Category1</option>
 <option value="10">Category2</option>
 <option value="11">Category3</option>
 <option value="12">Category4</option>
 <option value="13">Category5</option>
 <option value="22">Category6</option>
</select>

我想知道您是否希望输入按钮或图像向用户显示您可以删除特定记录？

我

做了一个例子，我正在添加背景。

.select-box {
  height: 400px;
}
.select-box option {
  background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat;
  padding-left: 25px;
  cursor: pointer;
}
.select-box option:hover {
  background: url(https://cdn2.iconfinder.com/data/icons/snipicons/500/minus-sign-16.png) 1px -1px no-repeat #eee;
}
<select name="from" id="multiselectSubCat" multiple="multiple" class="select-box" style="width: 300px; top: 100px">
  <option value="9">Category1</option>
  <option value="10">Category2</option>
  <option value="11">Category3</option>
  <option value="12">Category4</option>
  <option value="13">Category5</option>
  <option value="22">Category6</option>
</select>

在此基础上构建如何使用语言切换器的列表

    而不是<选择>下拉列表？

    试一试：

    var nav = $('#nav');
var selection = $('.select');
var select = selection.find('li');
nav.click(function(event) {
    if (nav.hasClass('active')) {
        nav.removeClass('active');
        selection.stop().slideUp(200);
    } else {
        nav.addClass('active');
        selection.stop().slideDown(200);
    }
    event.preventDefault();
});
select.click(function(event) {
    // updated code to select the current language
    select.removeClass('active');
    $(this).addClass('active');
    alert ("location.href = 'index.php?lang=" + $(this).attr('data-value'));
});
$(".del").on("click",function(e) {
  e.preventDefault();
  $(this).parent().remove();
});  
    h2 {
    width: 200px;
    background: #222;
    color:  #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}
ol
{
    list-style-type: none;
}
ol.select {
    display: none;
}
ol.select > li {
    width: 200px;
    background: #eee;
    line-height: 25px;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
}
ol.select > li:hover {
    background: #aaa;
}
.select a { text-decoration:none }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2 id="nav">Choose Language</h2>
<ol class="select">
    <li data-value="en"><a class="del" href="#">X</a> English</li>
    <li data-value="de"><a class="del" href="#">X</a> Deutsch</li>
</ol>

U 做了正确的事情，只需要很少的更改

<a href="http://jsfiddle.net/ajaymalhotra15/2tmntdft/" > click here to see code </a>
相关文章：