以表格形式在選項中顯示所選值

Question

我想默認顯示為表格選擇選項，並在單擊表格的可編輯按鈕列表后打開表格

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


});
});

Answer 1

你必須

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

添加調用jQuery方法：

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

但是，如果像這樣查看Warehouse_id附近的HTML代碼，它將起作用

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