Marimar Marimar - 1 month ago 10
Javascript Question

copy the dropdownlist selected option to text area on mvc view-- JQuery / Javascript

I am trying to copy or put the text option selected on the dropdown list to text area Jquery on MVC View and I select by the text area doesn't show the text.. Any help??

<div class="form-group">
@Html.Label("LocationText", "Location Letter Text ", htmlAttributes: new { @class = "control-label col-md-2" })
<br />
@Html.DropDownList("RemarksId", null, new { id = "RemarksId", @class = "form-control" })
<div class="col-md-10">
</div>
</div>

<div class="form-group">
<div class="col-md-10">
@Html.LabelFor(model => model.Remarks, htmlAttributes: new { @class = "control-label col-md-2" })
</div>
@Html.TextAreaFor(model => model.Remarks, new { @class = "form-control", id = "Remarks", rows = 5, cols = 70 })
@Html.ValidationMessageFor(model => model.Remarks, "", new { @class = "text-danger" })
</div>


JQuery

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/jscript">
$(function () {
$('#RemarksId').change(function() {
var str= $("#RemarksId option:selected").text();
$('#Remarks').val(str);
});
});
</script>
}

Answer

You need to take the value of selected option from dropdown using .text method. please refer below code snippet

$(function () {
      $('#RemarksId').change(function()  {
      var str= $(this).val();
        $('#Remarks').val(str);
      });
    });

And, from the dropdown options change option value="1" to option id="1"

Do this for all options, and the above code will work for you.

Also see demo fiddle here Fiddle

Let me know if it works for you or not.

Thanks