MVC Javascript Set Text Input Value Based on Model

Question

I have an Html.DropDownListFor, a textbox, and a model that contains a list "sourceWatchListParameters".

My end goal is, when an item is selected in the dropdownlist, populate the textbox with a property "DefaultParameter" for that particular sourceWatchList.

$(function() {
    $('select#WatchListDropDown').change(function () {
        var e = document.getElementById("#WatchListDropDown").selectedIndex.value;

        @foreach (var watchlist in Model.sourceWatchListParameters)
        {
            @:if (watchlist.WatchListId == e)
            {
                @: var def = document.getElementById("expDefault");
                @: def.value = watchlist.DefaultParameter;
            }
        }

    })
});

The function is called correctly, but I can't figure out the logic/syntax to locate the right sourceWatchListParameter and display its DefaultParameter. As it is now, I see no change in the textbox on selection. I'm sure there's a simpler way to rewrite this.

Thanks for any guidance

What is watchlist and why you're mixing JS and jQuery?

Yair Nevet
– Yair Nevet

2013-08-09 16:41:02 +00:00
Commented Aug 9, 2013 at 16:41 — Yair Nevet
– Yair Nevet, Commented Aug 9, 2013 at 16:41
I'm mixing them i suppose because I'm confused

Jonesopolis
– Jonesopolis

2013-08-09 17:16:22 +00:00
Commented Aug 9, 2013 at 17:16 — Jonesopolis
– Jonesopolis, Commented Aug 9, 2013 at 17:16
Okay, and what is "DefaultParameter"?

Yair Nevet
– Yair Nevet

2013-08-09 17:18:24 +00:00
Commented Aug 9, 2013 at 17:18 — Yair Nevet
– Yair Nevet, Commented Aug 9, 2013 at 17:18

andres descalzo · Accepted Answer · 2013-08-12 13:38:32Z

I suppose you have something like this:

@Html.DropDownListFor(
     m => m.WatchListDropDown, 
     Model.SourceListWatchListDropDown() ...)

Here you only have the value ('id') and the description, but you can do something like this to have the 3 values:

<select id="WatchListDropDown" name="WatchListDropDown">
@foreach (var wp in Model.sourceWatchListParameters)
{
   <option value="@wp.WatchListId" data-defparam="@wp.DefaultParameter">@wp.Description</option>
}
</select>

in this case, if you need get the default parameter, you only need to do this:

$(function() {
    $('#WatchListDropDown').bind('change', function () {
        var newValue = $(this).find('option:selected').data('defparam');
        $('#expDefault').val(newValue);;
    })
});

if your to render the page already have a value assigned, you can do the following:

   $('#WatchListDropDown').bind('change', function () {
       ...
   }).trigger('change');

Edit
Result for the solution of @Jonesy

Supposing that "Model.sourceWatchListParameters" has this value:

[
 {
    WatchListId = 1,
    Description = "Description 1"
 },
 {
    WatchListId = 3,
    Description = "Description 3"
 },
 {
    WatchListId = 3,
    Description = "Description 3"
 }
]

Your code would look like:

$('select#WatchListDropDown').change(function () {

    if ($('#WatchListDropDown').val() == "1")
        $("#expDefault").val("Description 1");
    }

    if ($('#WatchListDropDown').val() == "2")
        $("#expDefault").val("Description 2");
    }

    if ($('#WatchListDropDown').val() == "3")
        $("#expDefault").val("Description 3");
    }
})

Jonesopolis · Accepted Answer · 2013-08-09 18:57:00Z

0

got it finally as such :

$('select#WatchListDropDown').change(function () {
        @foreach (var w in Model.sourceWatchListParameters)
        {
            @:if ($('#WatchListDropDown').val() == "@w.WatchListId.ToString()")
            @:{
                @: $("#expDefault").val("@w.Description");
            @:}
        }
    })

answered Aug 9, 2013 at 18:57

Jonesopolis

25.4k12 gold badges72 silver badges115 bronze badges

3 Comments

andres descalzo Over a year ago

with this solution you have in your javascript code all items written and all 'if' for each item

Jonesopolis Over a year ago

I'm sorry what do you mean?

andres descalzo Over a year ago

I'm respond you in my answerd.

Collectives™ on Stack Overflow

MVC Javascript Set Text Input Value Based on Model

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related