How to bind the on change event to dropdownlist event on MVC razor view?

Question

User-1651604128 posted

In my MVC web app razor view, I have two dropdownlist fields as below:

...
 Product Name in English:  @Html.DropDownListFor(model => model.ProdId, new SelectList(ViewBag.CboEProduct, "Directorate_ID", "Expr1"), "", new { style = "max-width:100%;", @id = "ProIDE" })

 Product Name in French:  @Html.DropDownListFor(model => model.ProdId, new SelectList(ViewBag.CbofProduct, "Directorate_ID", "Expr1"), "", new { style = "max-width:100%;", @id = "ProIDF" })

you can see the two data source is same (model => model.ProdId), but I use "ProIDE" and "ProIDF" to differentiate them. 

Now, I want to add an event to one dropdownlist, so when user click one dropdownlist and select the value, the other dropdownlist will be populated the same value selected.

In other words, if user select English Product dropdownlist, the French Product dropdownlist is also populated the same value selected, verse versa.

Can anybody help me out? thanks a lot, 

Answer 1

User475983607 posted

There are issues with this design.  The design has two selects with the same name but different data sources.   The related ViewModel property or action argument must be defined as an array otherwise; model binding will not populate the value.

The following JavaScript logic functions as requested but I'm pretty sure you'll have other issues due to the design.

@{
    ViewBag.Title = "Home Page";
}

    <div>
        <select id="ProdId" name="ProdId">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>

        <select id="ProdId" name="ProdId">
            <option value="1">Un</option>
            <option value="2">Deux</option>
            <option value="3">Trois</option>
        </select>
    </div>


@section scripts{
    <script>
        $('select[name="ProdId"]').change(function () {
            var val = $(this).val();
            console.log(val);
            $('select[name="ProdId"]').each(function (index, value) {
                $(value).val(val);
            });
        });
    </script>
}

Answer 2

User-1651604128 posted

There are issues with this design.  The design has two selects with the same name and id but different data sources.   The related ViewModel property or action argument must be defined as an array otherwise; model binding will not populate the value.

The following JavaScript logic functions as requested but I'm pretty sure you'll have other issues due to the design.

@{
    ViewBag.Title = "Home Page";
}

    <div>
        <select id="ProdId" name="ProdId">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>

        <select id="ProdId" name="ProdId">
            <option value="1">Un</option>
            <option value="2">Deux</option>
            <option value="3">Trois</option>
        </select>
    </div>


@section scripts{
    <script>
        $('select[name="ProdId"]').change(function () {
            var val = $(this).val();
            console.log(val);
            $('select[name="ProdId"]').each(function (index, value) {
                $(value).val(val);
            });
        });
    </script>
}

Thanks a lot for your quick response, I tried your codes, it works fine, but it does not work if I do not embed the code inside of @section scripts{ ...

I need to implement the javasscript codes to external js file.

if you check my codes, since I am using @Html.DrodownListfor, so I have to find a way to apply your codes in my case, I can not make it work.

Even tried to use Alert to test it, it does not trigger.  something like this:

<script type="text/javascript">
$('#ProdId).change(function () {  // even tried as yours  $('select[name="ProdId"]').change(function () {

            var val = $(this).val();
            alert("val:" + val); // this alert does not trigger
})

</script>

 

Answer 3

User-1823088829 posted

Could it be your are

• not closing the quote: $('#ProdId).
• Your select/option html elements are named 'ProIDE' and 'ProIDF', not 'ProdId'

Answer 4

User475983607 posted

Thanks a lot for your quick response, I tried your codes, it works fine, but it does not work if I do not embed the code inside of @section scripts{ ...

I need to implement the javasscript codes to external js file.

Most likely the external file is loaded before the HTML. Either load the file after the selects or place the change handler inside the jQuery ready event.

Even tried to use Alert to test it, it does not trigger.  something like this:

<script type="text/javascript">
$('#ProdId).change(function () {  // even tried as yours  $('select[name="ProdId"]').change(function () {

            var val = $(this).val();
            alert("val:" + val); // this alert does not trigger
})

</script>

The yellow highlighted selector has no chance of working since your IDs are ProIDE and ProIDF not ProdId.  But you did say the example code worked in the script section.  That means the name is correct unless there's other information we need to know.

I'm pretty sure you still have a design issue as the select inputs have the same name.  

Answer 5

User665608656 posted

Hi Peter,

According to your requirements, If you want to reference to an external JS file,I suggest you should still use @section scripts to contain your js file.

A section allows you to add something in a view which will be added in the layout.

You could refer to the external js file like this:

   @section scripts{
    <script src="~/Scripts/External.js"></script>
    }

Best Regards,

YongQing.

Answer 6

User-1651604128 posted

Peter Cong

Thanks a lot for your quick response, I tried your codes, it works fine, but it does not work if I do not embed the code inside of @section scripts{ ...

I need to implement the javasscript codes to external js file.

Most likely the external file is loaded before the HTML. Either load the file after the selects or place the change handler inside the jQuery ready event.

Peter Cong

Even tried to use Alert to test it, it does not trigger.  something like this:

<script type="text/javascript">
$('#ProdId).change(function () {  // even tried as yours  $('select[name="ProdId"]').change(function () {

            var val = $(this).val();
            alert("val:" + val); // this alert does not trigger
})

</script>

The yellow highlighted selector has no chance of working since your IDs are ProIDE and ProIDF not ProdId.  But you did say the example code worked in the script section.  That means the name is correct unless there's other information we need to know.

I'm pretty sure you still have a design issue as the select inputs have the same name.  

Sorry the typo I used which creates more confusion,

But I found the issue was not that type ("ProdId" or "ProIDF"), it is still not working even I used correct id - "ProIDE", this is what I found:

 $(function () {  
        $("#ProIDE").change(function () {
            var id = $(this).val();
            alert("id:" + id);
            $("#ProIDF").val(id);
        })
    })

The above codes are working perfectly, I have to add "$(function() { .." in front of original codes,

Answer 7

User-1651604128 posted

Hi Peter,

According to your requirements, If you want to reference to an external JS file,I suggest you should still use @section scripts to contain your js file.

A section allows you to add something in a view which will be added in the layout.

You could refer to the external js file like this:

   @section scripts{
    <script src="~/Scripts/External.js"></script>
    }

Best Regards,

YongQing.

Thanks a lot, thanks for your response, please check the solution I found,

Answer 8

User-1651604128 posted

thanks a lot for your help, please check the solution I found in my response,

Answer 9

User-1651604128 posted

There are issues with this design.  The design has two selects with the same name but different data sources.   The related ViewModel property or action argument must be defined as an array otherwise; model binding will not populate the value.

The following JavaScript logic functions as requested but I'm pretty sure you'll have other issues due to the design.

@{
    ViewBag.Title = "Home Page";
}

    <div>
        <select id="ProdId" name="ProdId">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>

        <select id="ProdId" name="ProdId">
            <option value="1">Un</option>
            <option value="2">Deux</option>
            <option value="3">Trois</option>
        </select>
    </div>


@section scripts{
    <script>
        $('select[name="ProdId"]').change(function () {
            var val = $(this).val();
            console.log(val);
            $('select[name="ProdId"]').each(function (index, value) {
                $(value).val(val);
            });
        });
    </script>
}

Hi mgebhard, your codes gives me a big hints, thanks a lot

Answer 10

User475983607 posted

Sorry the typo I used which creates more confusion,

But I found the issue was not that type ("ProdId" or "ProIDF"), it is still not working even I used correct id - "ProIDE", this is what I found:

 $(function () {  
        $("#ProIDE").change(function () {
            var id = $(this).val();
            alert("id:" + id);
            $("#ProIDF").val(id);
        })
    })

The above codes are working perfectly, I have to add "$(function() { .." in front of original codes,

Peter, the shared code works one way.  You'll need to add a change event handler for ProIDF too.  Or you can use the "name" selector as recommended above.

Keep in mind that you still have a potential issue the duplicate names.  Make sure the associated view model has a "ProdId" defined as an array or the action argument is defined as an array.

 

Answer 11

User-1651604128 posted

Peter Cong

Sorry the typo I used which creates more confusion,

But I found the issue was not that type ("ProdId" or "ProIDF"), it is still not working even I used correct id - "ProIDE", this is what I found:

 $(function () {  
        $("#ProIDE").change(function () {
            var id = $(this).val();
            alert("id:" + id);
            $("#ProIDF").val(id);
        })
    })

The above codes are working perfectly, I have to add "$(function() { .." in front of original codes,

Peter, the shared code works one way.  You'll need to add a change event handler for ProIDF too.  Or you can use the "name" selector as recommended above.

Keep in mind that you still have a potential issue the duplicate names.  Make sure the associated view model has a "ProdId" defined as an array or the action argument is defined as an array.

Hi bgebhard, thanks a lot for your reminding,

I added the event to both ProIDE and ProIDF, the business logic is similar as the codes you provided,

since it is only using the key which is ID of each field, the description has English and French is based on the ID, and the ID on ProIDE and ProdIDF is same, so it is working fine.

again, much appreciated,   

Answer 12

User475983607 posted

since it is only using the key which is ID of each field, the description has English and French is based on the ID, and the ID on ProIDE and ProdIDF is same, so it is working fine.

You understand once you try to submit the data to a controller.  The most likely symptom is the expected ID is null.