How to get the selected index of a dropdowlist with javascript

Posted by rui martins on Stack Overflow See other posts from Stack Overflow or by rui martins
Published on 2012-11-22T09:27:56Z Indexed on 2012/11/22 11:00 UTC
Read the original article Hit count: 201

Filed under:
|

I have a table with several @Html.dropdowlistfor in it.

I was trying to read the selected value of using javascript, but all read is the html generated. How can I read it??

for (var i = 0; i < oTable.length; i++) {
  **userModel.Id    = oTable[i][0];**

  regionModel.Users.push(userModel);
  processModel.Regions.push(regionModel);

  userModel   = { "Id": "", "Name": ""};
  regionModel = { "Id": "", "Name": "", "Users": []};
}

TABLE

<table class="tbl" id="tbl">
        <thead>
            <tr>
                <th>
                    Region
                </th>
                <th>
                    Owner
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model != null)
            {
                foreach (var item in Model.Regions)
                {
                <tr>
                    <td>
                        @Html.DisplayTextFor(i => item.Name)
                    </td>
                    <td>
                        @Html.DropDownListFor(i => item.Users, new SelectList(item.Users, "Id", "Name"))
                    </td>
                </tr>
            }
            }
        </tbody>

CODE

function ProcessSave() {
    // Step 1: Read View Data and Create JSON Object

    var userModel = { "User": "", "Name": ""};

    var regionModel = {"Region" : "","Name": "", "Users": []};

    var processModel = { "User": "", "Description": "", "Code": "", "Regions": []};

    processModel.Name           = $("#Name").val();
    processModel.Code           = $("#Code").val();
    processModel.Description    = $("#Description").val();

    var oTable = $('.tbl').dataTable().fnGetData();

        for (var i = 0; i < oTable.length; i++) {

            regionModel.Name  = oTable[i][0];

            userModel.User    = oTable[i][1];
            userModel.Name    = oTable[i][1];

            regionModel.Users.push(userModel);
            processModel.Regions.push(regionModel);

            userModel   = { "Id": "", "Name": ""};
            regionModel = { "Name": "", "Users": []};
       }
    // Step 1: Ends Here

    // Set 2: Ajax Post
    // Here i have used ajax post for saving/updating information
    $.ajax({
        url: '/Process/Create',
        data: JSON.stringify(processModel),
        type: 'POST',
        contentType: 'application/json;',
        dataType: 'json',
        success: function (result) {

            if (result.Success == "1") {
                window.location.href = "/Process/Index";
            }
            else {
                alert(result.ex);
            }
        }
    });
}

MODELS

namespace TestingTool.ViewModels
{
    public partial class ProcessModel
    {
        public string Name { get; set; }
        public string Description { get; set; }
        public string Code { get; set; }

        public virtual ICollection<RegionModel> Regions { get; set; }
    }
}

namespace TestingTool.ViewModels
{
    public class RegionModel
    {
        public int Region { get; set; }
        public string Name { get; set; }
        public virtual ICollection<UserModel> Users { get; set; }

    }
}

namespace TestingTool.ViewModels
{
    public class UserModel
    {
        public int User{ get; set; }
        public string Name { get; set; }
    }
}

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about asp.net-mvc