Changing values of (multiple) dropdown lists from one dropdown list in MVC

Question

I have an MVC page, with some controls inside a form. The part I need help with: I have a bunch of dropdowns in a list. All dynamically named (drop{0}, where {0} is the id (really, its just a counter: 1,2,3,etc)). At the top of the list, I want to have another dropdown that will update ALL the dropdowns when it is changed. I've done similar things with checkboxes (check one and all are checked, etc) so I assume this can be done, hopefully just as simple. I'd prefer it to be on the client side, so once the form is submitted, the new values will be added/updated to the database.

Edit: The values of ALL the dropdowns are static. They are all a list of 1-50, representing the number of cards I need to produce for a given record.

This is how I did the checkbox:

$("#chkSelectAll").click(function() {
      $(".checkbox").attr('checked', this.checked);
 });

Any thoughts on where to begin?

Thanks!

Answer 1

You could use the starts with selector:

$('#somedropdown').change(function() {
    // when the value of the dropdown changes loop through other dropdowns
    // whose id begins with "drop"
    $('select[id^=drop]').each(function() {
        // do something with the dropdown
    });
 });

Answer 2

I understand that you want to set the selection of the other dropdowns, using jQuery. If so, do this....

function onSelectChange(){
    var stext = $("#dropdown0 option:selected").val();
    switch (stext) {
    case "Value1":
        $("#dropdown1 > option[value='Good']").attr('selected','selected');
        $("#dropdown2 > option[value='9000']").attr('selected','selected');
        break;
    case "Value2":
        $("#dropdown1 > option[value='Better']").attr('selected','selected');
        $("#dropdown2 > option[value='34000']").attr('selected','selected');
        break;
    case "Value3":
        $("#dropdown1 > option[value='Good']").attr('selected','selected');
        $("#dropdown2 > option[value='1000']").attr('selected','selected');
        break;
    case "Value4":
        $("#dropdown1 > option[value='Better']").attr('selected','selected');
        $("#dropdown2 > option[value='9000']").attr('selected','selected');
    }
}

working example: http://jsbin.com/odabe

Answer 3

One possible solution (of apparently many):

        $("#ddlQuantity").change(function() {
            $(".quantity").attr('selectedIndex', this.selectedIndex);
        });

Since the .quantity class applies to all the created objects, changing the .attr of the "class" worked just fine.