使用jquery在DropDownList中編輯或刪除項目

我需要使用jquery對下拉列表中的項目執行編輯和刪除操作。對於編輯來說，我用下面的值編碼使用jquery在DropDownList中編輯或刪除項目

$(".imgE").click(function() 
      { 
       var value = $(this).siblings(".ename").text() 
       $(this).siblings(".ename").hide(); 
       $(this).siblings(".edit").show().val(value).focus(); 
      } 
$(".edit").focusout(function() 
        { 
         $(this).hide().siblings(".ename").show().text($(this).val()); 
        });

和刪除我用下面的值編碼

$(".imgD").click(function() 
     { 
      $(this).parent().parent().remove(); 

     });

我能不能夠修改的項目

來源

2015-09-25 Kalai

-1

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <script src="jquery.js"></script> 
 

 
    <script> 
 
    $(document).ready(function() { 
 
     $(".imgE").click(function() { 
 
     var value = $(this).siblings(".ename").text() 
 
     $(this).siblings(".ename").hide(); 
 
     $(this).siblings(".edit").show().val(value).focus(); 
 
     }); 
 
     $(".edit").focusout(function() { 
 
     $(this).hide().siblings(".ename").show().text($(this).val()); 
 
     }); 
 
     $(".imgD").click(function() { 
 
     $(this).parent().remove(); 
 
     }); 
 
    }); 
 
    </script> 
 
    <style type="text/css"> 
 
    .imgE, 
 
    .imgD { 
 
     height: 20px; 
 
     width: 20px; 
 
     padding: 1px; 
 
    } 
 
    li { 
 
     width: 100%; 
 
    } 
 
    .ename, 
 
    .edit { 
 
     display: inline-block; 
 
     width: 70%; 
 
    } 
 
    .edit { 
 
     display: none; 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li><span class="ename">ITEM1</span> 
 
     <input class="edit" value="ITEM1" /> 
 
     <img src="edit.png" class="imgE" /> 
 
     <img src="delete.png" class="imgD"> 
 
    </li> 
 
    <li><span class="ename">ITEM1 </span> 
 
     <input class="edit" value="ITEM1" /> 
 
     <img src="edit.png" class="imgE" /> 
 
     <img src="delete.png" class="imgD"> 
 
    </li> 
 
    <li><span class="ename">ITEM1</span> 
 
     <input class="edit" value="ITEM1" /> 
 
     <img src="edit.png" class="imgE" /> 
 
     <img src="delete.png" class="imgD"> 
 
    </li> 
 
    <li><span class="ename">ITEM1 </span> 
 
     <input class="edit" value="ITEM1" /> 
 
     <img src="edit.png" class="imgE" /> 
 
     <img src="delete.png" class="imgD"> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <script src="jquery.js"></script> 
 
    <script src="https://google-codeettify.googlecode.com/svn/loader/run_prettify.js"></script> 
 
    <script> 
 
    $(document).ready(function() { 
 
     $(".imgE").click(function() { 
 
     var value = $(this).siblings(".ename").text() 
 
     $(this).siblings(".ename").hide(); 
 
     $(this).siblings(".edit").show().val(value).focus(); 
 
     }); 
 
     $(".edit").focusout(function() { 
 
     $(this).hide().siblings(".ename").show().text($(this).val()); 
 
     }); 
 
     $(".imgD").click(function() { 
 
     $(this).parent().remove(); 
 
     }); 
 
    }); 
 
    </script> 
 
    <style type="text/css"> 
 
    .imgE, 
 
    .imgD { 
 
     height: 20px; 
 
     width: 20px; 
 
     padding: 1px; 
 
    } 
 
    li { 
 
     width: 100%; 
 
    } 
 
    .ename, 
 
    .edit { 
 
     display: inline-block; 
 
     width: 70%; 
 
    } 
 
    .edit { 
 
     display: none; 
 
    } 
 
    </style> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li><span class="ename">ITEM1</span> 
 
     <input class="edit" value="ITEM1" /> 
 
     <img src="edit.png" class="imgE" /> 
 
     <img src="delete.png" class="imgD"> 
 
    </li> 
 
    <li><span class="ename">ITEM1 </span> 
 
     <input class="edit" value="ITEM1" /> 
 
     <img src="edit.png" class="imgE" /> 
 
     <img src="delete.png" class="imgD"> 
 
    </li> 
 
    <li><span class="ename">ITEM1</span> 
 
     <input class="edit" value="ITEM1" /> 
 
     <img src="edit.png" class="imgE" /> 
 
     <img src="delete.png" class="imgD"> 
 
    </li> 
 
    <li><span class="ename">ITEM1 </span> 
 
     <input class="edit" value="ITEM1" /> 
 
     <img src="edit.png" class="imgE" /> 
 
     <img src="delete.png" class="imgD"> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-09-25 12:07:01

我編程，這樣和我的工作。 –

也許一些解釋你爲什麼這樣做會很好。 – GHajba

使用jquery在DropDownList中編輯或刪除項目

回答

相關問題