How to get the selected value of a dropdowlist with javascript

Question

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

I was trying to read the selected value byusing 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": []};

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

HTML OUTPUT

<table class="tbl" id="tbl">
            <thead>
                <tr>
                    <th>
                        Region
                    </th>
                    <th>
                        Owner
                    </th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                        <td>
                            Belgium
                        </td>
                        <td>
                            <select id="item_Users" name="item.Users"><option value="1">Steven Segers</option>
<option value="2">Rui Martins</option>
</select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            France
                        </td>
                        <td>
                            <select id="item_Users" name="item.Users"><option value="1">Steven Segers</option>
<option value="2">Rui Martins</option>
</select>
                        </td>
                    </tr>
            </tbody>
        </table>

Do you mean "with javascript"? json is more like a format for communicating data to/from a server and makes no sense in this context! — Jamiec
– Jamiec, Commented Nov 22, 2012 at 10:14
Json, js, whatever, I'm not very familiar with it, my thing is c#. If I have one dropdownlist, I know how to read from it. My problem is reading this one inside the table. — Rui Martins
– Rui Martins, Commented Nov 22, 2012 at 10:37
What is oTable, what is userModel and regionModel? What does the HTML look like that is output by your C# code? There's nowhere near enough detail to answer your question here im afraid (which is why you've not gotten an answer yet!) — Jamiec
– Jamiec, Commented Nov 22, 2012 at 10:41

testCoder · Accepted Answer · 2012-11-22 13:10:19Z

2

Have you tried:

$("#item_Users option:selected").index();

If you have many selects with same id try this (that selector select all 'select' with name attribute ending with Users :

 $("select[name$='Users']:eq(0) option:selected").index();  //get first select

 $("select[name$='Users']:eq(1) option:selected").index();  //get second select

But bad practices of usage multiple same id on page. Same id should single on page. But even you have multiple id on page would be better specify same class for all selects, in that case code will be shortly:

 $("select.Users:eq(0) option:selected").index();  //get first select

 $("select.Users:eq(1) option:selected").index();  //get second select

UPDATE:

$("select.Users").each(function (index, element) {
    var optionIndex = $(element).find("option:selected").index();
});

edited Nov 22, 2012 at 13:10

answered Nov 22, 2012 at 11:25

testCoder

7,42513 gold badges59 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rui Martins Over a year ago

I think that would work if I had one dropdowlist, i have several with that id. But I did try it, still get 0.

Rui Martins Over a year ago

This actually works. Instead of 0 and 1, how can I use a loop variable, $("select.Users:eq(i) option:selected").index(); ??

Rui Martins Over a year ago

I managed to get it to work. But It returns the index of the selected item. How can I get the actual value of the selected item? In this case, 1, 2, 2010 and 2011 <select id="item_Users" name="item.Users"> <option value="1">Steven Segers</option> <option value="2">Rui Martins</option> <option value="2010">Mohammed Chbabi</option> <option value="2011">Peter Cortens</option> </select>

testCoder Over a year ago

var selectedOptionValue = $(element).find("option:selected").val();

Collectives™ on Stack Overflow

How to get the selected value of a dropdowlist with javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related