从保存时的下拉列表中获取所选值

get selected value from dropdown on save

本文关键字：获取 下拉列表 保存      更新时间：2023-09-26

我在表中动态添加一行（带有按钮和下拉列表），每一行都有编辑保存和删除按钮。 单击保存按钮单元格变得不可编辑

function Save(){
    var par = $(this).parent().parent(); //tr
    var isactive = par.children("td:nth-child(1)");
    var id = par.children("td:nth-child(2)");
    isactive.html(id.children(':selected').val());
    id.html(id.children("input[type=text]").val());
}

当我单击保存按钮时，ID 字段变得不可编辑，但下拉列表是可编辑的，所以任何人都可以告诉我正确的方法。

function Edit(){
    var par = $(this).parent().parent(); //tr
    var isactive = par.children("td:nth-child(1)");
    var id = par.children("td:nth-child(2)");
    id.html("<input type='text' id='txtPhone' value='"+id.html()+"'/>");
 }

在单击编辑时，它会在文本框中设置id的值，但是如何使用下拉列表执行相同的操作，请帮助...

在HTML表中动态插入，编辑，删除，保存行。在这里，我创建了一个工作jsFiddle。参考 jsfiddle 中的代码。

目录：

<div class="container">
    <h2>Table Management</h2>
    <div class="table-responsive">
    <table border="1" class="table table-striped table-hover  table-bordered">
    <tr>
        <td>Column 1</td>    
        <td>Column 2</td> 
        <td>Edit row</td>
        <td>save</td>
        <td class='deleterow'>delete<div class='glyphicon glyphicon-remove'></div></td>
    </tr>
    <tr>
        <td>A</td>    
        <td>test1</td>  
        <td><a href='#' class='editrow'>edit</a></td>
        <td><a href='#' class='saverow'>save</a></td>
        <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>
    </tr>
    <tr>
        <td>B</td>    
        <td>test2</td> <td><a href='#' class='editrow'>edit</a></td>
        <td><a href='#' class='saverow'>save</a></td> 
        <td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td>
    </tr>
    </table>
    </div>
</div>
<hr><button class='btn btn-lg btn-primary addnewrow pull-right'>Add New <span class="glyphicon glyphicon-plus"></span></button>

.JS：

$(".deleterow").on("click", function(){
    var $killrow = $(this).parent('tr');
    $killrow.addClass("danger");
    $killrow.fadeOut(2000, function(){
        $(this).remove();
    });
});
$(document).on('click',".saverow",function(){ 
    var par = $(this).parent().parent(); //tr
    var isactive = par.children("td:nth-child(1)");
    var id = par.children("td:nth-child(2)"); 
    isactive.html(isactive.children('select').val());
    id.html(id.children("input[type=text]").val()); 
});
$(document).on("click",".editrow", function(){ 
    var par = $(this).parent().parent(); //tr 
    var isactive = par.children("td:nth-child(1)");
    var id = par.children("td:nth-child(2)");      
    var prevVal = isactive.html();     
    isactive.html("<select class='seldom'/>");
    $('select.seldom')
         .append($("<option>A</option>")
         .attr("value","A")
         .text('A'));      
    $('select.seldom')
         .append($("<option>B</option>")
         .attr("value","B")
         .text('B')); 
    $('select.seldom option').each(function(){        
        if($(this).val() === prevVal){ // EDITED THIS LINE             
            $(this).attr("selected","selected");    
        }
    });
    id.html("<input type='text' id='txtPhone' value='"+id.html()+"'/>");
});
function Edit(){
    var par = $(this).parent(); //tr
    console.log(par);
    var isactive = par.children("td:nth-child(1)");
    var id = par.children("td:nth-child(2)");
    console.log(id)
    id.html("<input type='text' id='txtPhone' value='"+id.html()+"'/>");
 }
$(".addnewrow").on("click", function(){
    $('table tr:last').after("<tr><td data-qid='X'>NEW</td><td>NEW</td> <td><a href='#' class='editrow'>edit</a></td><td><a href='#' class='saverow'>save</a></td><td class='deleterow'><div class='glyphicon glyphicon-remove'></div></td></tr>");
});
相关文章：