1st Drop-down selection determins selected value in all drop-downs In ASP.Net Wizard control

I have converted a standard ASP.net Web Form written in VB into a multi-step Wizard control. There is a section/step in the form that contains 4 drop-downs. All  4 drop-downs contain the same list items and values:

      <asp:DropDownList ID="ddl1st" runat="server">
        <asp:ListItem value="">-- Select One --</asp:ListItem>
        <asp:ListItem value="15,000/30,000">15,000/30,000</asp:ListItem>
        <asp:ListItem value="25,000/50,000">25,000/50,000</asp:ListItem>
        <asp:ListItem value="50,000/100,000">50,000/100,000</asp:ListItem>
        <asp:ListItem value="100,000/300,000">100,000/300,000</asp:ListItem>
        </asp:DropDownList>

When a selection is made from drop-down #1 (ddl1st), I would like the remaining 3 drop-downs (ddl2nd, ddl3rd, ddl4th) to automatically select the same selected item as the ddl1st.

So, for example, if the user selects '50,000/100,000' from 'ddl1st', I would like ddl2nd, ddl3rd, and ddl4th to also select  '50,000/100,000'.

I was using the JQuery Date Picker for date fields and a JS solution for the drop-downs but all that stopped working when I converted the standard form into a Wizard control. I am now using the Ajax toolkit Calendar extender for date fields and would like to come up with an ASP.Net solution for the Drop-down issue described above.

Coded examples please, thanks in advance!

jayschAsked:
Who is Participating?
 
databoksCommented:
If it is exactly the same values in the same order, then you can use the IndexProperty to select the same.

For example you have ddl1 and the value 1 is selected at index 1, then you go to the other listbox and set the SelectedIndex = ddl1.SelectedIndex


Hope this helps and i have understand it correctly.
0
 
ProculopsisCommented:

Try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26974333.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $(".master").change( eventChange );

});

function eventChange() {

  var selected = this.selectedIndex;

  $(".slave").each( function() {
    this.selectedIndex = selected;
  });
  
}

</script>
</head>
<body>

<select ID="ddl1st" class="master">
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        </select>

<select ID="ddl2nd" class="slave">
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        </select>

<select ID="ddl3rd" class="slave">
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        </select>

<select ID="ddl4th" class="slave">
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        </select>

</body>
</html>

Open in new window

0
 
jayschAuthor Commented:
After a value is selected in the 1st drop-down, all other drop-downs in that row of the form need to automatically populate with the same value.

Here is the JS that used to work when the form used non-asp controls. As soon as I put everything inside the Wizard control, added the Update panel, and switched to asp.net server controls, it stopped working.

<script type="text/javascript">
$(document).ready(function(){
      $("#ddlVeh1BodInjury").change(function(){
            $("#ddlVeh2BodInjury").val($("#ddlVeh1BodInjury").val());
            $("#ddlVeh3BodInjury").val($("#ddlVeh1BodInjury").val());
            $("#ddlVeh4BodInjury").val($("#ddlVeh1BodInjury").val());
      });      
      
      $("#ddlVeh1PropDamage").change(function(){
            $("#ddlVeh2PropDamage").val($("#ddlVeh1PropDamage").val());
            $("#ddlVeh3PropDamage").val($("#ddlVeh1PropDamage").val());
            $("#ddlVeh4PropDamage").val($("#ddlVeh1PropDamage").val());
      });      
      
      $("#ddlVeh1MedPayments").change(function(){
            $("#ddlVeh2MedPayments").val($("#ddlVeh1MedPayments").val());
            $("#ddlVeh3MedPayments").val($("#ddlVeh1MedPayments").val());
            $("#ddlVeh4MedPayments").val($("#ddlVeh1MedPayments").val());
      });      
      
      $("#ddlVeh1UninMotor").change(function(){
            $("#ddlVeh2UninMotor").val($("#ddlVeh1UninMotor").val());
            $("#ddlVeh3UninMotor").val($("#ddlVeh1UninMotor").val());
            $("#ddlVeh4UninMotor").val($("#ddlVeh1UninMotor").val());
      });      
      
      $("#ddlVeh1CollWaiverYN").change(function(){
            $("#ddlVeh2CollWaiverYN").val($("#ddlVeh1CollWaiverYN").val());
            $("#ddlVeh3CollWaiverYN").val($("#ddlVeh1CollWaiverYN").val());
            $("#ddlVeh4CollWaiverYN").val($("#ddlVeh1CollWaiverYN").val());
      });            
});
</script>

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
jayschAuthor Commented:
Proculopsis - Your solution works great in a conventional form and is a bit more elegant than the one I was using before converting to server side drop-down controls, update panel (Ajax) and the Wizard control.

I need something that works within the following structure:

<form runat="server" name="quoteform">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>  

<asp:Wizard ID="Wizard1"  />
<asp:WizardStep ID="WizardStep1" runat="server" StepType="Step">

<table >
  <tr>
    <td><strong>Bodily Injury:</strong></td>
    <td><asp:DropDownList ID="ddlVeh1BodInjury" runat="server">
        <asp:ListItem value="">-- Select One --</asp:ListItem>
        <asp:ListItem value="15,000/30,000">15,000/30,000</asp:ListItem>
        <asp:ListItem value="25,000/50,000">25,000/50,000</asp:ListItem>
        <asp:ListItem value="50,000/100,000">50,000/100,000</asp:ListItem>
        <asp:ListItem value="100,000/300,000">100,000/300,000</asp:ListItem>
        <asp:ListItem value="250,000/500,000">250,000/500,000</asp:ListItem>
        <asp:ListItem value="500,000/500,000">500,000/500,000</asp:ListItem>
        </asp:DropDownList></td>
    <td><asp:DropDownList ID="ddlVeh2BodInjury" runat="server" >
        <asp:ListItem value="">-- Select One --</asp:ListItem>
       <asp:ListItem value="15,000/30,000">15,000/30,000</asp:ListItem>
        <asp:ListItem value="25,000/50,000">25,000/50,000</asp:ListItem>
        <asp:ListItem value="50,000/100,000">50,000/100,000</asp:ListItem>
        <asp:ListItem value="100,000/300,000">100,000/300,000</asp:ListItem>
        <asp:ListItem value="250,000/500,000">250,000/500,000</asp:ListItem>
        <asp:ListItem value="500,000/500,000">500,000/500,000</asp:ListItem>
        </asp:DropDownList></td>
    <td><asp:DropDownList ID="ddlVeh3BodInjury" runat="server" >
        <asp:ListItem value="">-- Select One --</asp:ListItem>
        <asp:ListItem value="15,000/30,000">15,000/30,000</asp:ListItem>
        <asp:ListItem value="25,000/50,000">25,000/50,000</asp:ListItem>
        <asp:ListItem value="50,000/100,000">50,000/100,000</asp:ListItem>
        <asp:ListItem value="100,000/300,000">100,000/300,000</asp:ListItem>
        <asp:ListItem value="250,000/500,000">250,000/500,000</asp:ListItem>
        <asp:ListItem value="500,000/500,000">500,000/500,000</asp:ListItem>
        </asp:DropDownList></td>
    <td><asp:DropDownList ID="ddlVeh4BodInjury" runat="server" >
        <asp:ListItem value="">-- Select One --</asp:ListItem>
        <asp:ListItem value="15,000/30,000">15,000/30,000</asp:ListItem>
        <asp:ListItem value="25,000/50,000">25,000/50,000</asp:ListItem>
        <asp:ListItem value="50,000/100,000">50,000/100,000</asp:ListItem>
        <asp:ListItem value="100,000/300,000">100,000/300,000</asp:ListItem>
        <asp:ListItem value="250,000/500,000">250,000/500,000</asp:ListItem>
        <asp:ListItem value="500,000/500,000">500,000/500,000</asp:ListItem>
        </asp:DropDownList></td>
  </tr>

</asp:WizardStep>
</asp:Wizard>
</ContentTemplate>
</asp:UpdatePanel>
</form>

I think one requirement is finding the drop-down controls within each Wizard step.



0
 
ProculopsisCommented:

Is this any better:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26974333.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("select[id$=ddlVeh1BodInjury]").change( eventChange );

});

function eventChange() {

  var selected = this.selectedIndex;

  $(this).closest("tr").find("select").not(this).each( function() {
    this.selectedIndex = selected;
  });
  
}

</script>
</head>
<body>

<table >
  <tr>
    <td><strong>Bodily Injury:</strong></td>
    <td><select ID="ddlVeh1BodInjury" runat="server">
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        <option value="250,000/500,000">250,000/500,000</option>
        <option value="500,000/500,000">500,000/500,000</option>
        </select></td>
    <td><select ID="ddlVeh2BodInjury" runat="server" >
        <option value="">-- Select One --</option>
       <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        <option value="250,000/500,000">250,000/500,000</option>
        <option value="500,000/500,000">500,000/500,000</option>
        </select></td>
    <td><select ID="ddlVeh3BodInjury" runat="server" >
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        <option value="250,000/500,000">250,000/500,000</option>
        <option value="500,000/500,000">500,000/500,000</option>
        </select></td>
    <td><select ID="ddlVeh4BodInjury" runat="server" >
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        <option value="250,000/500,000">250,000/500,000</option>
        <option value="500,000/500,000">500,000/500,000</option>
        </select></td>
  </tr>
  <tr>
    <td><strong>Another set:</strong></td>
    <td><select ID="ddlVeh1BodInjury" runat="server">
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        <option value="250,000/500,000">250,000/500,000</option>
        <option value="500,000/500,000">500,000/500,000</option>
        </select></td>
    <td><select ID="ddlVeh2BodInjury" runat="server" >
        <option value="">-- Select One --</option>
       <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        <option value="250,000/500,000">250,000/500,000</option>
        <option value="500,000/500,000">500,000/500,000</option>
        </select></td>
    <td><select ID="ddlVeh3BodInjury" runat="server" >
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        <option value="250,000/500,000">250,000/500,000</option>
        <option value="500,000/500,000">500,000/500,000</option>
        </select></td>
    <td><select ID="ddlVeh4BodInjury" runat="server" >
        <option value="">-- Select One --</option>
        <option value="15,000/30,000">15,000/30,000</option>
        <option value="25,000/50,000">25,000/50,000</option>
        <option value="50,000/100,000">50,000/100,000</option>
        <option value="100,000/300,000">100,000/300,000</option>
        <option value="250,000/500,000">250,000/500,000</option>
        <option value="500,000/500,000">500,000/500,000</option>
        </select></td>
  </tr>
</table>


</body>
</html>

Open in new window

0
 
jayschAuthor Commented:
Proculopsis - Sorry, no luck the your latest code.
0
 
jayschAuthor Commented:
Would love a solution that works with in the Update Panel and Wizard control!
0
 
jayschAuthor Commented:
Found my own solution. Thanks to all for your suggestions.

rotected Sub ddlVeh1BodInjury_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs) Handles ddlVeh1BodInjury.SelectedIndexChanged
        Dim ddlVeh1BodInjury As DropDownList = DirectCast(sender, DropDownList)
        Dim value As String = ddlVeh1BodInjury.SelectedValue

        SetValueBodInjury(ddlVeh2BodInjury, value)
        SetValueBodInjury(ddlVeh3BodInjury, value)
        SetValueBodInjury(ddlVeh4BodInjury, value)
    End Sub

    Protected Sub SetValueBodInjury(ByVal ddlVeh1BodInjury As DropDownList, ByVal value As String)
        ddlVeh1BodInjury.SelectedIndex = ddlVeh1BodInjury.Items.IndexOf(ddlVeh1BodInjury.Items.FindByValue(value))
    End Sub

0
 
jayschAuthor Commented:
I awarded databoks 250 points because it was the suggestion that ultimately inspired my solution. But Proculopsis was instrumental in helping to figure out the underlying logic.

Thanks again!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.