How i can catch the value text of dropdownlist in asp MVC?

Question

I'm try to make webgrid can user edit and delete it inline so i made it the webgrid and i bind it successfully and the update function works will and when i press on edit button label transform to text and dropdownlist There is my ajax code

  <script type="text/javascript">
$(function () {
    $('.edit-mode').hide();
    $('.edit-user, .cancel-user').on('click', function () {
        var tr = $(this).parents('tr:first');


        tr.find('.edit-mode, .display-mode').toggle();
    });
    $('.save-user').on('click', function () {
        var getValue;
        var tr = $(this).parents('tr:first');
        var FirstName = tr.find("#FirstName").val();
        var Phone = tr.find("#Phone").val();
        var Branch = tr.find("#Branch-drop").val();

        getValue = $("#Branch-drop option:selected").text();

        var UserID = tr.find("#UserID").html();
        tr.find("#lblFirstName").text(FirstName);
        tr.find("#lblPhone").text(Phone);
        tr.find("#lblBracnh").text(getValue);
        tr.find('.edit-mode, .display-mode').toggle();
        var UserModel = {
            "IdEmp": UserID,
            "EmpName": FirstName,
            "Phone": Phone,
            "BranchName": Branch
        };
        $.ajax({
            url: '/Home/UpdateUser/',
            data: JSON.stringify(UserModel),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                alert(data);

            }
        });
    });
})




  </script>

and the webgrid code is

           @{
        var grid = new WebGrid(Model);
         }


     <div id="gridContent" style=" padding:20px; ">
      @grid.GetHtml(
    tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    footerStyle: "webgrid-footer",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    rowStyle: "webgrid-row-style",
    mode: WebGridPagerModes.All,
    columns:
        grid.Columns(
             grid.Column("IdEmp", "ID", format: @<text>  <span class="display-mode">@item.IdEmp </span> <label id="UserID" class="edit-mode">@item.IdEmp</label> </text>, style: "col1Width" ),
         grid.Column("EmpName","Employee Name", format: @<text>  <span class="display-mode"> <label id="lblFirstName">@item.EmpName</label> </span> <input type="text" id="FirstName" value="@item.EmpName" class="edit-mode" /></text>, style: "col2Width"),
        grid.Column("Phone", "Phone", format: @<text> <span class="display-mode"> <label id="lblPhone">@item.Phone</label> </span>  <input type="text" id="Phone" value="@item.Phone" class="edit-mode" /> </text>, style: "col2Width"),
      grid.Column("BranchName","Branches", format: @<text><span class="display-mode"> <label id="lblBracnh">@item.BranchName</label> </span>   @Html.DropDownList("MyDropdowen", (SelectList)ViewBag.DropDowenValue, new { id = "Branch-drop", @class = "edit-mode" })</text>,style:"col2Width"),
         grid.Column("Action", format: @<text>
    <button class="edit-user display-mode">Edit</button>
    <button class="save-user edit-mode">Save</button>
    <button class="cancel-user edit-mode">Cancel</button>
    <button class="Delete-user ">Delete</button>
        </text>, style: "col3Width", canSort: false)
                         ))

the problem is the dropdownlist when appears doesn't show on the current value and when i change it the text the label don't take the new value So How i can make the dropdown list take the current value and when the user selected new text and press save the dropdown take the new value?

Answer 1

There is mistake in syntax of get value text of dropdownlist here is my code :

  getValue = $("#Branch-drop option:selected").text();

should be :

      getValue = tr.find("#Branch-drop option:selected").text();  

and it's worked Thanks for everyone