CODEWITHSUNDEEP
jqueryajaxasp.net-mvc
TBA
TBA

Reputation: 1187

Changing Radio Buttons when Drop Down Changes MVC

In my ASP.NET MVC view, I have a drop down list and three radio buttons, as given

@Html.RadioButtonFor(m => m.ClientDur1.LookupValueID, "true", new { Name = "grp", @id = "CM1", @checked = "true" }) @Model.ClientDur1.Val1
@Html.RadioButtonFor(m => m.ClientDur2.LookupValueID, "false", new { Name = "grp", @id = "CM2" })  @Model.ClientDur2.Val1
@Html.RadioButtonFor(m => m.ClientDur3.LookupValueID, "false", new { Name = "grp", @id = "CM3" }) @Model.ClientDur3.Val3

and my Drop down list is,

@Html.DropDownListFor(m => m.Currency, new SelectList(Model.CurrencyList, "AttributeValueID", "AttributeDescription"), new { @id = "ddCurrencyId" })

And what I need is when ever I changes my dropdown List I would Like to update my Radio Button Values, That is my Model.ClientDur1.LookupValueID and ClientDur1.Val1 (similarly for others too) should have new changed details.

How can I achieve this?

Upvotes: 0

Views: 1444

Answers (2)

zagros
zagros

Reputation: 134

Adding to the answer above:

Try this JS Fiddle http://jsfiddle.net/khoorooslary/6DjpT/

You need Javascript to link the ID of drop down to the input radio's

PS if you aren't familiar with JSFiddle, look on the bottom right window to see the demo and play with it

HTML Code

<form>

    <input type="radio" id="rd_one" name="rd" value="1"  checked="checked"/>
    <input type="radio" id="rd_two" name="rd" value="2" />
    <input type="radio" id="rd_three" name="rd" value="3" />
    <input type="radio" id="rd_four" name="rd" value="4" />
    <hr />

    <select id="ByIdDemo">
        <option>Select By Id Demo</option>
        <option value="one">Option 1</option>
        <option value="two">Option 2</option>
        <option value="three">Option 3</option>
        <option value="four">Option 4</option>
    </select>

    <hr />

    <select id="ByValue">
        <option>Select By Value Demo</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>

</form>

Javascript Code

$(function() {

    $("#ByIdDemo").on('change',function() {
        var sel = this;
        $("form input").each(function(eli,el) {
            var id = "rd_"+ sel.options[sel.selectedIndex].value;
            el.checked = el.id == id;
            $(el).attr("checked",  el.checked ? "checked" : null);
        });
    });


     $("#ByValue").on('change',function() {
        var sel = this;
        $("form input").each(function(eli,el) {
            el.checked = el.value == sel.options[sel.selectedIndex].value;
            $(el).attr("checked",  el.checked ? "checked" : null);
        });
    });

});

Upvotes: 1

JF it
JF it

Reputation: 2403

please try this code:

$(document).ready(function() {
     $('#ddCurrencyId').change(function() {
         $('#CM' + $(this).val()).trigger('click');
     });
});

I really need to see more of the HTML Markup After you have ran the project to see Values/HTML of Radio buttons..

Im guessing the value of the dropdown will be 1, 2 or 3, that is why i'm saying SELECT the ID: CM + DropDownValue in the code..

Upvotes: 1

Related Questions