Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2011-04-24
9
Medium Priority
?
333 Views
Last Modified: 2012-05-11
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!

0
Comment
Question by:jaysch
  • 6
  • 2
9 Comments
 
LVL 8

Accepted Solution

by:
databoks earned 750 total points
ID: 35456257
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
 
LVL 20

Assisted Solution

by:Proculopsis
Proculopsis earned 450 total points
ID: 35456265

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
 

Author Comment

by:jaysch
ID: 35456275
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jaysch
ID: 35456319
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
 
LVL 20

Expert Comment

by:Proculopsis
ID: 35456357

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
 

Author Comment

by:jaysch
ID: 35478796
Proculopsis - Sorry, no luck the your latest code.
0
 

Author Comment

by:jaysch
ID: 35497146
Would love a solution that works with in the Update Panel and Wizard control!
0
 

Author Comment

by:jaysch
ID: 35497558
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
 

Author Closing Comment

by:jaysch
ID: 35497586
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question