时间戳

首页 > 解决方案 > 在表格中的表单中显示选项中的选定值

javascript - 在表格中的表单中显示选项中的选定值

问题描述

我想在默认情况下以表单选择的选项显示，并在单击表格可编辑按钮列表后打开表单

here are my form code and get option in select through ajax api call

 $(document).ready(function(){

    editForm = function(userId) {

         $url = "http://warehouse.makeindiadigital.in/public/warehouse_user/"+userId

// alert("url"+$url) $.getJSON($url, function(userId){

    var warehouse_data = '';
    $.each(userId, function(key, value){
       warehouse_data +='<form onsubmit="return validation()">';
      // warehouse_data +='<input type="hidden" id="id" value='+userId.id+'>';

       warehouse_data +='<h6 class="form_name" style="text-align:center; padding:10px 0px;"><span style="padding:10px 35px">User Id</span><input type="text" name="userid" class="userid" id="userid" value="'+userId.userid+'"></h6><span id="logonError" class="loginvalidate"></span>';
       warehouse_data +='<h6 class="form_name" style="text-align:center; padding:10px 0px;"><span style="padding:10px 26px;">Password</span><input type="password" name="password" class="password" id="password" value='+userId.password+' style="background-color:#fff;"></h6><span id="pwdError" class="loginvalidate"></span>';
        warehouse_data +='<h6 class="form_name" style="text-align:center; padding:10px 0px; font-size:16px;"><span style="padding:10px 15px">Warehouse</span><select type="text" name="warehouse_id" class="warehouse_id" id="warehouse_id" style="width:200px; height:30px;"></select></h6><span id="wareidError" class="loginvalidate"></span>';
         warehouse_data +='<h6 class="form_name" style="text-align:center; padding:10px 0px;"><span style="padding:10px 41px">Name</span><input type="text" name="name" class="name" id="name" value="'+userId.name+'"></h6>';
          warehouse_data +='<h6 class="form_name" style="text-align:center; padding:10px 0px;"><span style="padding:10px 39px">Phone</span><input type="text" name="phone" class="phone" id="phone" value='+userId.phone+'></h6><span id="phonerroe" class="loginvalidate"></span>';
           warehouse_data +='<h6 class="form_name" style="text-align:center; padding:10px 0px;"><span style="padding:10px 41px">Email</span><input type="text" name="email" class="email" id="email" value='+userId.email+'></h6><span id="emailerror" class="loginvalidate"></span>';
         warehouse_data +='<h6 class="form_name" style="text-align:center; padding:10px 0px;"><input type="hidden" id="userUniqueId" value='+userId.id+'></h6>';
       warehouse_data +='<input type="submit" name="submit" class="formSubmit" id="formReload" style="margin-left:50%; background-color:#2E3C56; color:#fff; cursor:pointer" value="submit" OnClick="updateWarehouseUser();">';

       warehouse_data +='</form>';




        return false;
    });

    console.log(warehouse_data);



  $('#warehouseForm').empty().append(warehouse_data); 



});


  $.ajax({  
       type: "GET",  
       url: "http://warehouse.makeindiadigital.in/public/warehouse",  
       data: "{}",  
       success: function (data) {  
           var s = '<option  value="" >Select Warehouse</option>';  
           for (var i = 0; i < data.length; i++) {  
               s += '<option  value="' + data[i].warehouse_id + '">' + data[i].warehouse_name + '</option>';  
           }  
           $(".warehouse_id").html(s);  

           console.log(s)
       }  
   });



    };

 });

显示详细信息列表并单击编辑按钮表单的表格以值打开

$(document).ready(function(){ $.getJSON(" http://warehouse.makeindiadigital.in/public/warehouse_users ", function(data){

    var warehouse_data = '';
    $.each(data, function(key, value){
       warehouse_data +='<tr>';
       warehouse_data +='<td>'+value.userid+'</td>';
    //   warehouse_data +='<td>'+value.password+'</td>';
       warehouse_data +='<td>'+value.warehouse_name.warehouse_name+'</td>';
       warehouse_data +='<td>'+value.name+'</td>';
       warehouse_data +='<td>'+value.phone+'</td>';
       warehouse_data +='<td>'+value.email+'</td>';
   // warehouse_data +='<td>'+value.active+'</td>';
       warehouse_data +='<td><a href="#" OnClick="editForm('+value.id+');" data-toggle="modal" data-target="#myModal">Edit</a> | &nbsp; <a href="#" OnClick="deleteRecord('+value.id+');">Delete</a></td>';

       warehouse_data +='</tr>';

       console.log(warehouse_data)

    });

    $('#warehouseuser_table').append(warehouse_data);


});
});

标签： javascriptjqueryhtmlcssapi

解决方案

你必须在

$('#warehouseForm').empty().append(warehouse_data);

添加调用jQuery方法：

$(".warehouse_id").val(userId);

但是如果仓库ID附近的HTML代码像这样查看，它将起作用

<select class="warehouse_id"></select>

推荐阅读