Javascript with an ascx control

Question

I designed an ascx control (I refer to it in this question as customControl). The control is just a series of drop downs with text values in each drop down. The drop downs are inside a panel.

Here it is below:

I then place a few of them on a page that also has a textbox (I refer to it here as textbox)

Here it is below:

So what I need to develop, is Javascript that when any of the drop downs in any of the customControls have a selected drop down index changed event, to find all the values in all the boxes of all the controls of type customControl on the page and simply put that text in the textbox.

Do I need to define my control to have a class so JS can find all of them easily and then have the JS function take in the textbox as control so it knows what to output and where?

Answer 1

Set all your drop downs with a css class of "customControlDropDown" or whatever and your textbox with a css class name of "bigTextBox" or whatever and use some jQuery.

<script type='text/javascript'>
   $(document).ready(function(){
      $("select.customControlDropDown").change(function(){ //change event for all drop downs with customControlDropDown as its css class name
         var collectiveText = "";
         $("select.customControlDropDown option:selected").each(function(i){  //get all selected options in all the drop downs with customControlDropDown as its css class name
            collectiveText = collectiveText + $(this).text(); //append the item's text to a string variable
         });

         $(".bigTextBox").val(collectiveText); //set the textbox with css class name of bigTextBox with value of the string variable from above
      });
   });
</script>

I haven't tested this, but it SHOULD work. Let us know.