select table row value populate in form control(Dropdown,text field)

Analyst_SQL 3,576

I am selecting or Clicking on row of table, then relevant data from get populate in downdown and text field,

issue is that text field is getting populate ,but dropdown field is not getting populating ,i am sharing my whole code..

View

@model ERP_APP.Models.ItemModel

@{
    ViewBag.Title = "CreaterItem";
   
}


<div class="col-lg-8">
    <div class="card card-default mb-5">
        <div class="card-header">Employee Form</div>
        <div class="card-body">

            @using (Html.BeginForm("CreateItem", "Item", FormMethod.Post))

            {
                @Html.AntiForgeryToken()

            <div class="form-horizontal">

                <hr />
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })


                <div class="form-group">
                    @Html.LabelFor(model => model.Descriptionitem, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Descriptionitem, new { htmlAttributes = new { @class = "form-control", @id = "item_Name" } })
                        @Html.ValidationMessageFor(model => model.Descriptionitem, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.BaleSize, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.BaleSize, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.BaleSize, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.weight, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.weight, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.weight, "", new { @class = "text-danger" })
                    </div>
                </div>





                <div class="form-group">
                    @Html.LabelFor(model => model.SecID, "Select Department Level", htmlAttributes: new { @class = "control-label col-md-6" })
                    <div class="col-md-10">
                       @* @Html.DropDownList("SecId", null, "Select Department", htmlAttributes: new { @class = "form-control", @id = "select2-1" })*@

                        @Html.DropDownList("SecId", (SelectList)ViewBag.secid, "Select", htmlAttributes: new { @class = "form-control", @id = "select2-1" })

                        @Html.ValidationMessageFor(model => model.SecID, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.IDUOM, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.IDUOM, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.IDUOM, "", new { @class = "text-danger" })
                    </div>
                </div>




                <div class="form-group">
                    @Html.LabelFor(model => model.CID, "Select Category Level", htmlAttributes: new { @class = "control-label col-md-6" })
                    <div class="col-md-10">
                        @Html.DropDownList("cID", null, "Select Department", htmlAttributes: new { @class = "form-control", @id = "select2-2" })
                        @Html.ValidationMessageFor(model => model.CID, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Create" class="btn btn-default" />
                    </div>
                </div>
            </div>


            }
            <h4>Item Search</h4>
            <hr />
            <div class="form-group">
                @Html.LabelFor(model => model.CodeItem, "Select Item", htmlAttributes: new { @class = "control-label col-md-6" })
                <div class="col-md-10">
                    @Html.DropDownList("codeitem", null, "Select Item", htmlAttributes: new { @class = "form-control", @id = "select2-3" })
                    @Html.ValidationMessageFor(model => model.CodeItem, "", new { @class = "text-danger" })
                </div>
            </div>



            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box box-primary">


                            <div class="box-body">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Item Name</th>
                                            <th>Section</th>
                                            <th>BaleSize</th>
                                            <th>weight</th>
                                            <th>UOM</th>
                                            <th>Action</th>

                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach (var item in Model.Itemss)
                                        {
                                            <tr>
                                                <td>@Html.DisplayFor(module => item.CodeItem)</td>
                                                <td>@Html.DisplayFor(module => item.Descriptionitem)</td>
                                                <td>@Html.DisplayFor(module => item.Section)</td>
                                                <td>@Html.DisplayFor(module => item.BaleSize)</td>
                                                <td>@Html.DisplayFor(module => item.weight)</td>
                                                <td>@Html.DisplayFor(module => item.UOM)</td>
                                                
                                            </tr>
                                        }
                                    </tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>




            </section>

        </div>
    </div>
</div>

<script src="~/Content/Template/vendor/ddlsearch.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#select2-3").on('change', function (e) {
            $.ajax({
                type: 'GET',
                url: "/Item/GetItem",
                dataType: 'json',
                data: { codeitem: $(this).find('option:selected').val() },
                success: function (response) {
                    $('#example1').hide();
                    $('#example1 tbody').empty();
                    $.each(response, function (i, item) {
                        var rows = "<tr>" +
                            "<td>" + item.CodeItem + "</td>" +
                            "<td>" + item.Descriptionitem + "</td>" +
                            "<td>" + item.Section + "</td>" +
                            "<td>" + item.BaleSize + "</td>" +
                            "<td>" + item.weight + "</td>" +
                            "<td>" + item.UOM + "</td>" +
                            "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                            "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                    $('#example1').show();
                },
                error: function () {
                }
            });
        });
    });

    $(function () {
        $.ajax({
            type: 'GET',
            url: "/Item/SelectItem",
            dataType: 'json',
            data: {},
            success: function (response) {
                $('#example1 tbody').empty();
                $.each(response, function (i, item) {
                    var rows = "<tr>" +
                        "<td>" + item.CodeItem + "</td>" +
                        "<td>" + item.Descriptionitem + "</td>" +
                        "<td>" + item.Section + "</td>" +
                        "<td>" + item.BaleSize + "</td>" +
                        "<td>" + item.weight + "</td>" +
                        "<td>" + item.UOM + "</td>" +
                        "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                        "</tr>";
                    $('#example1 tbody').append(rows);
                });
                $('#example1').show();
            },
            error: function () {
            }
        });

        $('body').on('click', '#example1 tbody tr', function () {
            $("#item_Name").val($(this).find('td').eq(1).html());
       
            $("#select2-1").val($(this).find('td').eq(2).html());
           
        });
    });
</script>

Controller

using ERP_APP.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using DataBaseLayer;

namespace ERP_APP.Controllers
{
    public class ItemController : Controller
    {
        SilverProductionEntities DB = new SilverProductionEntities();
        // GET: Item
        ItemModelDal sdb = new ItemModelDal();
        public ActionResult CreateItem()
        {
            ModelState.Clear();
            ItemModel item = new ItemModel();
       
            //For Loading Data
            
            item.Itemss = sdb.GetItem();
            var cID = 0;
            var secID = 0;
            var codeitEM = 0;
            ViewBag.cID = new SelectList(DB.Catagories.Where(bt => bt.CID > cID), "CID", "CName", "0");
            ViewBag.SecId = new SelectList(DB.Sections.Where(bt => bt.SecID > secID), "SecID", "Secnam", "0");
            ViewBag.codeitem = new SelectList(DB.ItemMasterFiles.Where(bt => bt.CodeItem > codeitEM), "codeitem", "Descriptionitem", "0");
            return View(item);

        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult CreateItem(ItemModel objmod)
        {
            try
            {
                int result = sdb.CreateItem(objmod);
                if (result == 1)
                {
                    ViewBag.Message = "Role Added Successfully";
                    ModelState.Clear();
                }
                else if (result == -1)
                {
                    ViewBag.Message = "Role Already Exists!";
                    ModelState.Clear();
                }
                else
                {
                    ViewBag.Message = "Unsucessfull";
                    ModelState.Clear();
                }

                return RedirectToAction("CreateItem");
            }
            catch
            {
                throw;
            }
        }


        public JsonResult GetItem(string codeitem)
        {
            List<ItemModel> items = new List<ItemModel>();
    
            using (SqlConnection con = new SqlConnection("data source=SERVER1\\SQLEXPRESS;initial catalog=SilverProduction;integrated security=True;MultipleActiveResultSets=True;"))
            {
                string query = "SELECT I.Codeitem,I.Descriptionitem,S.Secnam Section,I.weight,I.BaleSize,U.NameUOM UOM FROM ItemMasterFile I inner join Sections S on S.Secid=I.SecId inner join UOM U on U.IDUOM=I.IDUOM  where I.codeitem=@codeitem";
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.Connection = con;
                    cmd.Parameters.AddWithValue("@Codeitem", codeitem);
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            items.Add(new ItemModel
                            {
                                CodeItem = Convert.ToInt32(sdr["CodeItem"]),
                                Descriptionitem = Convert.ToString(sdr["Descriptionitem"]),
                                Section = Convert.ToString(sdr["Section"]),
                                weight = Convert.ToInt32(sdr["weight"]),
                                BaleSize = Convert.ToString(sdr["BaleSize"]),
                                UOM = Convert.ToString(sdr["UOM"]),
                            });
                        }
                    }
                    con.Close();
                }
            }
           
            var jsonResult = Json(items, JsonRequestBehavior.AllowGet);
            return jsonResult;


        }


   
            public JsonResult SelectItem()
        {
           
            
                return Json(DB.ItemMasterFiles.Take(0).ToList(), JsonRequestBehavior.AllowGet);
            }
        }
    }

AgaveJoe 30,411 Reputation points

2023-02-25T12:16:17.54+00:00
Basic debugging should help you figure out what's wrong. Start with writing the value of column 3 to the browser's dev tools console. What is the value of $(this).find('td').eq(2).html()? Can you share the #select2-1 HTML? Is there a value in the HTML that matches $(this).find('td').eq(2).html()?

$('body').on('click', '#example1 tbody tr', function () { $("#item_Name").val($(this).find('td').eq(1).html()); console.log($(this).find('td').eq(2).html()); $("#select2-1").val($(this).find('td').eq(2).html()); });

Also, why does the JavaScript application try to overwrite the table rows created in the server?
Analyst_SQL 3,576 Reputation points

2023-02-25T14:34:26.7866667+00:00

@AgaveJoe

Column 3 value is textbox ,which is populating fine ,#select2-1 , i am using template ,which i used Java Script.

i check console there is no error related to dropdown list
AgaveJoe 30,411 Reputation points

2023-02-25T15:26:19.1333333+00:00

Seriously?! You did not answer a single question!

Column 3 value is textbox

We cannot see any code that places a textbox in column 3. But, if this is true then the jQuery should return the val() of the textbox not the HTML within column 3.

i check console there is no error related to dropdown list

I did not ask if there were errors in the console. I recommended writing $(this).find('td').eq(2).html() to the console. Your design tries to set the value of a select to $(this).find('td').eq(2).html() which is HTML. Writing $(this).find('td').eq(2).html() to the console will show what your code is doing.
Lan Huang-MSFT 30,206 Reputation points Microsoft External Staff

2023-02-28T03:29:41.8166667+00:00

Hi @akhter hussain,

Try using the f12 developer tools to see if there is any error message.

You also can debug to see if there is any problem with the returned data.

Test your code with test data, the front end should be fine.

But since your code involves a lot of data, it is difficult for us to reproduce your problem. Maybe you can provide an example that minimally reproduces the problem.

Or provide all the information you involve, such as database tables, models, ItemModelDal, SilverProductionEntities,ddlsearch.js file.

Analyst_SQL 3,576

@Lan Huang-MSFT

here is Database table structure

Create table Sections (SecID int,Secnam varchar(50))

Insert into Sections values(1,'Belt')

Insert into Sections values(1,'Pant')

Create table ItemMasterFile (Codeitem int,secid int)

Insert into ItemMasterFile values(11,'1')

Insert into ItemMasterFile values(12,'2')

Now i am retrieving data into HTML table View

using below query

select  S.secnam  from  
ItemMasterFile I inner join Sections S on I.SeciD=S.SecID

Now i want ,when i select row from table ,then secid or SecNam get populate in dropdownlist

Below is my View

@model ERP_APP.Models.ItemModel

@{
    ViewBag.Title = "CreaterItem";

}


<div class="col-lg-8">
    <div class="card card-default mb-5">
        <div class="card-header">Employee Form</div>
        <div class="card-body">

            @using (Html.BeginForm("CreateItem", "Item", FormMethod.Post))

            {
                @Html.AntiForgeryToken()

                <div class="form-horizontal">

                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                    <div class="form-group">
                        @Html.LabelFor(model => model.SecID, "Select Department Level", htmlAttributes: new { @class = "control-label col-md-6" })
                        <div class="col-md-10">
                            @* @Html.DropDownList("SecId", null, "Select Department", htmlAttributes: new { @class = "form-control", @id = "select2-1" })*@

                            @Html.DropDownList("SecId", (SelectList)ViewBag.secid, "Select", htmlAttributes: new { @class = "form-control", @id = "select2-1" })

                            @Html.ValidationMessageFor(model => model.SecID, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Create" class="btn btn-default" />
                        </div>
                    </div>
                </div>

            }
            <h4>Item Search</h4>
            <hr />
            <div class="form-group">
                @Html.LabelFor(model => model.CodeItem, "Select Item", htmlAttributes: new { @class = "control-label col-md-6" })
                <div class="col-md-10">
                    @Html.DropDownList("codeitem", null, "Select Item", htmlAttributes: new { @class = "form-control", @id = "select2-3" })
                    @Html.ValidationMessageFor(model => model.CodeItem, "", new { @class = "text-danger" })
                </div>
            </div>

            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box box-primary">


                            <div class="box-body">
                                <table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>

                                            <th>Section</th>



                                        </tr>
                                    </thead>
                                    <tbody>

                                        @foreach (var item in Model.Itemss)
                                        {
                                            <tr>

                                                <td>@Html.DisplayFor(module => item.Section)</td>


                                            </tr>
                                        }
                                    </tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>




            </section>

        </div>
    </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#select2-3").on('change', function (e) {
            $.ajax({
                type: 'GET',
                url: "/Item/GetItem",
                dataType: 'json',
                data: { codeitem: $(this).find('option:selected').val() },
                success: function (response) {
                    $('#example1').hide();
                    $('#example1 tbody').empty();
                    $.each(response, function (i, item) {
                        var rows = "<tr>" +


                            "<td>" + item.Section + "</td>" +

                            "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                            "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                    $('#example1').show();
                },
                error: function () {
                }
            });
        });
    });

    $(function () {
        $.ajax({
            type: 'GET',
            url: "/Item/SelectItem",
            dataType: 'json',
            data: {},
            success: function (response) {
                $('#example1 tbody').empty();
                $.each(response, function (i, item) {
                    var rows = "<tr>" +

                        "<td>" + item.Section + "</td>" +

                        "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                        "</tr>";
                    $('#example1 tbody').append(rows);
                });
                $('#example1').show();
            },
            //error: function () {
            //}
        });

        $('body').on('click', '#example1 tbody tr', function () {

            $("#select2-1").val($(this).find('td').eq(2).html());




        });
    });
</script>

Controller

using ERP_APP.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;
using DataBaseLayer;

namespace ERP_APP.Controllers
{
    public class ItemController : Controller
    {
        SilverProductionEntities DB = new SilverProductionEntities();
        // GET: Item
        ItemModelDal sdb = new ItemModelDal();

        public ActionResult CreateItem()
        {
            ModelState.Clear();
            ItemModel item = new ItemModel();
       
            //For Loading Data
            
            item.Itemss = sdb.GetItem();
      
            var secID = 0;
            var codeitEM = 0;
 
            ViewBag.SecId = new SelectList(DB.Sections.Where(bt => bt.SecID > secID), "SecID", "Secnam", "0");

            ViewBag.codeitem = new SelectList(DB.ItemMasterFiles.Where(bt => bt.CodeItem > codeitEM), "codeitem", "Descriptionitem", "0");
            return View(item);

        }
    


        public JsonResult GetItem(string codeitem)
        {
            List<ItemModel> items = new List<ItemModel>();
    
            using (SqlConnection con = new SqlConnection("data source=SERVER1\\SQLEXPRESS;initial catalog=SilverProduction;integrated security=True;MultipleActiveResultSets=True;"))
            {
                string query = "SELECT S.Secnam Section FROM ItemMasterFile I inner join Sections S on S.Secid=I.SecId   where I.codeitem=@codeitem";
                using (SqlCommand cmd = new SqlCommand(query))
                {
                    cmd.Connection = con;
                    cmd.Parameters.AddWithValue("@Codeitem", codeitem);
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            items.Add(new ItemModel
                            {
                            
                                Section = Convert.ToString(sdr["Section"]),
                      
                            });
                        }
                    }
                    con.Close();
                }
            }
           
            var jsonResult = Json(items, JsonRequestBehavior.AllowGet);
            return jsonResult;


        }


   
            public JsonResult SelectItem()
          {
           
            
                return Json(DB.ItemMasterFiles.Take(0).ToList(), JsonRequestBehavior.AllowGet);
            }
        }
    }

public class ItemModelDal
    {

        SqlConnection con = new SqlConnection("data source=SERVER1\\SQLEXPRESS;initial catalog=SilverProduction;integrated security=True;MultipleActiveResultSets=True;");
     

        public List<ItemModel> GetItem()
        {
            List<ItemModel> item = new List<ItemModel>();
            SqlCommand cmd = new SqlCommand("SELECT I.Codeitem,I.Descriptionitem,S.Secnam Section,I.weight,I.BaleSize,U.NameUOM UOM FROM ItemMasterFile I inner join Sections S on S.Secid=I.SecId inner join UOM U on U.IDUOM=I.IDUOM where codeitem is null", con);
            cmd.CommandType = CommandType.Text;
            SqlDataAdapter sd = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            con.Open();
            sd.Fill(dt);
            con.Close();
            foreach (DataRow dr in dt.Rows)
            {
                item.Add(
                new ItemModel
                {
                    CodeItem = Convert.ToInt32(dr["CodeItem"]),
                    Descriptionitem = Convert.ToString(dr["Descriptionitem"]),
                    Section = Convert.ToString(dr["Section"]),
                    weight = Convert.ToInt32(dr["weight"]),
                    BaleSize = Convert.ToString(dr["BaleSize"]),
                    UOM = Convert.ToString(dr["UOM"]),
                    //SecID = Convert.ToString(dr["se"])
                });
            }
            return item;
        }



        public IList<SelectListItem> SecName { get; set; }
   

      
    }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;


namespace ERP_APP.Models
{

    public class ItemModel
    {
        public int CodeItem { get; set; }
        public string Descriptionitem { get; set; }
        public string BaleSize { get; set; }
        public Nullable<int> weight { get; set; }
        public Nullable<int> SecID { get; set; }
        public string Section { get; set; }
        public string Packsize { get; set; }
        public string ALID { get; set; }
        public Nullable<int> IDUOM { get; set; }
        public string UOM { get; set; }
        public Nullable<System.DateTime> entryDate { get; set; }
        public Nullable<int> CID { get; set; }
        public string Icn { get; set; }
        public Nullable<int> TiD { get; set; }
        public Nullable<int> RID { get; set; }
        public Nullable<System.DateTime> udate { get; set; }
        public string IPAddress { get; set; }
        public Nullable<int> delid { get; set; }
        public string I_Status { get; set; }
        public Nullable<System.TimeSpan> U_Time { get; set; }
        public string I_Cat { get; set; }
        public string I_Hot { get; set; }
        public Nullable<decimal> Y_per { get; set; }
        public Nullable<int> W_Type { get; set; }
        public Nullable<int> Empid { get; set; }
        public Nullable<int> I_Rate { get; set; }
        public Nullable<int> I_Level { get; set; }


        public List<ItemModel> Itemss { get; set; }
    }
}

AgaveJoe 30,411 Reputation points

2023-02-28T13:59:26.0033333+00:00
Your jQuery selector is looking for the third column; eq(2).

$("#select2-1").val($(this).find('td').eq(2).html());

Your new HTML table only has one column; eq(0).

Secondly, the query returns S.secnam which is a string. You populated the select's value with the ID not S.secnam.

ViewBag.SecId = new SelectList(DB.Sections.Where(bt => bt.SecID > secID), "SecID", "Secnam", "0");

Frankly, your coding is very sloppy. Basic debugging/troubleshooting finds these types of mistakes that all programmers make from time to time. The difference is experienced developers will take a look at what's inside of...

$(this).find('td').eq(2).html();

...or look for any errors in the browser's dev tools console.

The SQL your shared also has bugs. How can Belt and Pants have the same ID????

Also, the code I posted populates the values of every select. I'm not sure what you're doing but it seems like you're making very little effort to troubleshoot your own code.

Learn how to use the browser's dev tools when troubleshooting JavaScript/jQuery.

Chrome Dev tools

Use the Visual Studio debugger to troubleshooting code on the server.
Analyst_SQL 3,576 Reputation points

2023-02-28T17:55:48.04+00:00

on chrome Console below error displaying

server/i18n/site-en.json:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Answer accepted by question author

AgaveJoe 30,411

i got frustrated ,do not know ,where i am making mistake,

As far as I can tell you lack basic troubleshooting skills. You know the problem starts with the client side code (jQuery/JavaScript) and you can easily reproduce the problem. The first step is reviewing the HTML.

Right click the select2-1 (dropdown) in the browser and select "Inspect". Right click the select HTML and pick "Copy Element" Paste the HTML on the forum. I assume select2-1 is the select causing the problem.

<select class="form-control" id="select2-1" name="SecId">
    <option value="">Select</option>
    <option value="1">SecId 1</option>
    <option value="2">SecId 2</option>
    <option value="3">SecId 3</option>
</select>

Next, right click the HTML table and copy the HTML table here on the forum.

<table id="example1" class="table table-bordered table-striped">
   <thead>
      <tr>
         <th>ID</th>
         <th>Item Name</th>
         <th>Section</th>
         <th>BaleSize</th>
         <th>weight</th>
         <th>UOM</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Description 1</td>
         <td>1</td>
         <td>96</td>
         <td>10</td>
         <td>1</td>
         <td><a id="lnkView" href="javascript:void(0);">View</a></td>
      </tr>
      <tr>
         <td>2</td>
         <td>Description 1</td>
         <td>2</td>
         <td>55</td>
         <td>20</td>
         <td>2</td>
         <td><a id="lnkView" href="javascript:void(0);">View</a></td>
      </tr>
      <tr>
         <td>3</td>
         <td>Description 3</td>
         <td>3</td>
         <td>54</td>
         <td>40</td>
         <td>3</td>
         <td><a id="lnkView" href="javascript:void(0);">View</a></td>
      </tr>
   </tbody>
   <tfoot>
   </tfoot>
</table>

Finally, copy the jQuery/JavaScript click event and paste it here on the forum.

$('body').on('click', '#example1 tbody tr', function () {
    $("#item_Name").val($(this).find('td').eq(1).html());
    $("#select2-1").val($(this).find('td').eq(2).html());
    $("#BaleSize").val($(this).find('td').eq(3).text());
    $("#weight").val($(this).find('td').eq(4).text());
    $("#IDUOM").val($(this).find('td').eq(5).text());
    $("#select2-3").val($(this).find('td').eq(0).text());
    $("#select2-2").val($(this).find('td').eq(0).text());
});

This is all the information needed to start troubleshooting. The HTML table has the source value the select needs. All we have to do is compare table cells content to the select options. First, we look at the jQuery/JavaScript to find the column index used to fetch the value from the HTML table. From the index we find the column. The index is base zero so the first column is zero.

Next, we take a look at the column values and compare the column values to the select's option values. There should be a match between the column values and the option values. If there is no match check if the column value matches the option text. If you are matching text then you need the code I posted above which queries the select to find the value given the text.

  <script>
        $('body').on('click', '#example1 tbody tr', function () {

            //Get and show the value in the console. 
            var item = $(this).find('td').eq(0).text();
            console.log(item);

            //Get the value from the select
            var val = $('#select2-1 option').filter(function () { return $(this).html() == item }).val();
            console.log(val);

            $("#select2-1").val(val);
        });
    </script>

If there are no matches then you have other design issues.

Analyst_SQL 3,576

@AgaveJoe

I followed same as you instructed

<span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-select2-1-container"><span class="select2-selection__rendered" id="select2-select2-1-container" title="Select">Select</span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span>

table

<table id="example1" class="table table-bordered table-striped" style="">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Item Name</th>

                                            <th>BaleSize</th>
                                            <th>weight</th>
                                            <th>Section</th>
                                            <th>Action</th>

                                        </tr>
                                    </thead>
                                    <tbody><tr><td>7</td><td>4 Brands Summer # #</td><td>100 Lbs.</td><td>100</td><td>Brands</td><td><a id="lnkView" href="javascript:void(0);">View</a></td></tr></tbody>
                                    <tfoot>
                                    </tfoot>
                                </table>

<script type="text/javascript">
    $(document).ready(function () {
        $("#select2-3").on('change', function (e) {
            $.ajax({
                type: 'GET',
                url: "/Item/GetItem",
                dataType: 'json',
                data: { codeitem: $(this).find('option:selected').val() },
                success: function (response) {
                    $('#example1').hide();
                    $('#example1 tbody').empty();
                    $.each(response, function (i, item) {
                        var rows = "<tr>" +
                            "<td>" + item.CodeItem + "</td>" +
                            "<td>" + item.Descriptionitem + "</td>" +
                         
                            "<td>" + item.BaleSize + "</td>" +
                            "<td>" + item.weight + "</td>" +
                         
                            "<td>" + item.Section + "</td>" +
                            "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                            "</tr>";
                        $('#example1 tbody').append(rows);
                    });
                    $('#example1').show();
                },
                error: function () {
                }
            });
        });
    });

    $(function () {
        $.ajax({
            type: 'GET',
            url: "/Item/SelectItem",
            dataType: 'json',
            data: {},
            success: function (response) {
                $('#example1 tbody').empty();
                $.each(response, function (i, item) {
                    var rows = "<tr>" +
                        "<td>" + item.CodeItem + "</td>" +
                        "<td>" + item.Descriptionitem + "</td>" +
                   
                        "<td>" + item.BaleSize + "</td>" +
                        "<td>" + item.weight + "</td>" +
                        "<td>" + item.Section + "</td>" +
                        "<td><a id='lnkView' href='javascript:void(0);'>View</a></td>" +
                        "</tr>";
                    $('#example1 tbody').append(rows);
                });
                $('#example1').show();
            },
            //error: function () {
            //}
        });

        $('body').on('click', '#example1 tbody tr', function () {
            $("#CodeItem").val($(this).find('td').eq(0).html());
            $("#item_Name").val($(this).find('td').eq(1).html());
  
            $("#BaleSize").val($(this).find('td').eq(2).text());
            $("#weight").val($(this).find('td').eq(3).text());

            $("#select2-1").val($(this).find('td').eq(4).text());



            });

    });
</script>

AgaveJoe 30,411 Reputation points

2023-03-02T12:02:59.45+00:00

The HTML is not a select element. Maybe it is a 3rd party JavaScript widget you found? This HTML is not included in your original post. For 5 days the community has been focused on the original code which may or may not be the actual problematic code. Is this another sloppy response where you share code that does not exist in your project? Or have you wasted everyone's time?

Also, the HTML table has one numeric value (ID). Realistically, you can have only one dropdown (select element). The original code has three!

I'm not sure how anyone can help you as it seems you have no idea what you're doing and you are unable to communicate with forum members.

Analyst_SQL 3,576

I think you looking for this below

.select2-container--bootstrap4 .select2-selection--single {
  height: calc(2.25rem + 2px) !important; }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    color: #757575;
    line-height: 2.25rem; }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 50%;
    right: 3px;
    width: 20px; }
    .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
      top: 60%;
      border-color: #343a40 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      width: 0;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute; }
  .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    line-height: 2.25rem; }

.select2-search--dropdown .select2-search__field {
  border: 1px solid #ced4da;
  border-radius: 0.25rem; }

.select2-results__message {
  color: #6c757d; }

.select2-container--bootstrap4 .select2-selection--multiple {
  min-height: calc(2.25rem + 2px) !important;
  height: calc(2.25rem + 2px) !important; }
  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%; }
  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    color: #343a40;
    border: 1px solid #bdc6d0;
    border-radius: 0.2rem;
    padding: 0;
    padding-right: 5px;
    cursor: pointer;
    float: left;
    margin-top: 0.3em;
    margin-right: 5px; }
  .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: #bdc6d0;
    font-weight: bold;
    margin-left: 3px;
    margin-right: 1px;
    padding-right: 3px;
    padding-left: 3px;
    float: left; }
    .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #343a40; }

.select2-container *:focus {
  outline: 0; }

.select2-container--bootstrap4 .select2-selection {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  width: 100%; }

.select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: #17a2b8;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }

.select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0; }

select.is-invalid ~ .select2-container--bootstrap4 .select2-selection {
  border-color: #dc3545; }

select.is-valid ~ .select2-container--bootstrap4 .select2-selection {
  border-color: #28a745; }

.select2-container--bootstrap4 .select2-dropdown {
  border-color: #ced4da;
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }
  .select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected=true] {
    background-color: #e9ecef; }

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
  background-color: #007bff;
  color: #f8f9fa; }

.select2-container--bootstrap4 .select2-results__option[role=group] {
  padding: 0; }

.select2-container--bootstrap4 .select2-results__group {
  padding: 6px;
  display: list-item;
  color: #6c757d; }

.select2-container--bootstrap4 .select2-selection__clear {
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2em;
  padding-left: 0.3em;
  margin-top: 0.5em;
  border-radius: 100%;
  background-color: #6c757d;
  color: #f8f9fa;
  float: right;
  margin-right: 0.3em; }
  .select2-container--bootstrap4 .select2-selection__clear:hover {
    background-color: #343a40; }

AgaveJoe 30,411 Reputation points

2023-03-02T13:25:22.33+00:00

Seriously?! Your original code has nothing to do with the actual issue! You've wasted too much of my time. I have no desire to continue with this nonsense.
Analyst_SQL 3,576 Reputation points

2023-03-02T15:15:04.27+00:00

@AgaveJoe

I figure out ,it is not working my template ,which i am using in project

5 additional answers

AgaveJoe 30,411

i check in console in chrome, but no error is coming their for dropdown list

As I understand, the problem is clicking a row does not set the select with id=select2-1. All the other controls are populated properly.

The first step is reviewing the HTML in the browser's dev tools.

Right click select2-1 and select "Inspect". Right click the select HTML-> copy -> Copy element. Paste the HTML into a response to this post.

Example

<select class="form-control" id="select2-1" name="SecId">
    <option value="">Select</option>
    <option value="1">SecId 1</option>
    <option value="2">SecId 2</option>
    <option value="3">SecId 3</option>
</select>

Right click the table and select "Inspect". Right click the table HTML-> copy -> Copy element. Paste the HTML into a response to this post.

Example

<table id="example1" class="table table-bordered table-striped">
   <thead>
      <tr>
         <th>ID</th>
         <th>Item Name</th>
         <th>Section</th>
         <th>BaleSize</th>
         <th>weight</th>
         <th>UOM</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Description 1</td>
         <td>1</td>
         <td>96</td>
         <td>10</td>
         <td>1</td>
         <td><a id="lnkView" href="javascript:void(0);">View</a></td>
      </tr>
      <tr>
         <td>2</td>
         <td>Description 1</td>
         <td>2</td>
         <td>55</td>
         <td>20</td>
         <td>2</td>
         <td><a id="lnkView" href="javascript:void(0);">View</a></td>
      </tr>
      <tr>
         <td>3</td>
         <td>Description 3</td>
         <td>3</td>
         <td>54</td>
         <td>40</td>
         <td>3</td>
         <td><a id="lnkView" href="javascript:void(0);">View</a></td>
      </tr>
   </tbody>
   <tfoot>
   </tfoot>
</table>

Copy the jQuery/JavaScript click event you are currently using.

Example

$('body').on('click', '#example1 tbody tr', function () {
    $("#item_Name").val($(this).find('td').eq(1).html());
    $("#select2-1").val($(this).find('td').eq(2).html());
    $("#BaleSize").val($(this).find('td').eq(3).text());
    $("#weight").val($(this).find('td').eq(4).text());
    $("#IDUOM").val($(this).find('td').eq(5).text());
    $("#select2-3").val($(this).find('td').eq(0).text());
    $("#select2-2").val($(this).find('td').eq(0).text());
});

The rest is trivial. You looking for the column index select2-1 is using to set the .val(). Compare the column values to the select's option values? Do they match? Do they even exist?

Share via

select table row value populate in form control(Dropdown,text field)

5 additional answers

Your answer