Question

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

//load the file into a bufferedreader
try (BufferedReader br = new BufferedReader(new FileReader(args[0]))) {

    //read the first line and then while there's a line, append it to sb
    String line = br.readLine();
    while (line != null) {
        sb.append(line);
        sb.append(System.lineSeparator());
        line = br.readLine();
    }
    //turn sb into string
    everything = sb.toString();
} catch (Exception e) {
  e.printStackTrace();
}
//if everything.contains only symbols.
//exit
everything = checkStringLegitimacy(everything);

public static String checkStringLegitimacy(String str){
String newString = "";
System.out.println(str);
if (str.matches("[-/@#$%^&_+=()*.]*")){
    System.err.println("This only contained symbols, exit");
    System.exit(0);
}else if(str.matches("[-/@#$%^&_+=()*d.]*")){
//lets remove every character which is not `d` or `.`
    newString = str.replaceAll("[^d.]","");
    System.out.println("str"+str);
    return newString;
}
System.out.println("checkedstringlegit");
return str;

渲染

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

Answer 1

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

立足于此 How can I use <ul> list instead of <select> dropdown for the languages switcher?

了解一下：

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>

Answer 3

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

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

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

3 个答案: