show selected value in option in a form from a table

Question

i want to show in a form slected option by default and the form open after click on list of table editable button

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



    };

 });

table where list of detail show and click on edit button form open with value

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

You must after

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

add call jQuery method:

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

But it will be working if HTML code near warehouse_id viewed like this

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