Javascript mit einem ascx Steuerelement

Question

Ich entwarf ein ASCX-Steuerelement (ich beziehe mich in dieser Frage als customControl). Das Steuerelement besteht nur aus einer Reihe von Dropdowns mit Textwerten in jedem Dropdown. Die Dropdowns befinden sich in einem Panel.

Hier unten ist:

Ich stelle dann ein paar von ihnen auf einer Seite, die auch ein Textfeld hat (Ich bezeichne es hier als Textbox)

Hier ist unter :

Also, was ich entwickeln müssen, ist Javascript, dass, wenn eine der Dropdown-Menüs in einem der t Er hat ein ausgewähltes Drop-Down-Index-Ereignis, um alle Werte aller Steuerelemente des Typs CustomControl auf der Seite zu finden und diesen Text einfach in das Textfeld einzufügen.

Muss ich mein Steuerelement definieren, um eine Klasse zu haben, damit JS alle leicht finden kann und dann die JS-Funktion das Textfeld als Steuerelement annimmt, damit es weiß, was ausgegeben werden soll und wo?

Answer 1

Stellen Sie alle Ihre Drop-downs mit einer CSS-Klasse von "customControlDropDown" oder was auch immer und Ihre Textbox mit einem CSS-Klasse Namen "bigTextBox" oder was auch immer und Verwendung etwas 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> 

Ich habe dies nicht getestet, aber es sollte funktionieren. Lass uns wissen.

Answer 2

in Ihrem ascx-Steuerelement, muss die Klasse "myClass" haben.

window.onload = function(){ 
    function getElementsByClass(containerId, class) 
    { 
     container = document.getElementById(containerId); 
     var all = container.all¦¦container.getElementsByTagName('*') ; 
     var arr = [] 
     for(var k=0;k<all.length;k++) 
     if(all[k].getAttribute("class").indexOf("class") != -1) 
      arr[arr.length] = all[k]; 
     return arr; 
    } 

    var arrEl = getElementsByClass("container", "myClass"); 
    var xOnChange = function() 
    { 
     //this 
    } 

    for (var ind = 0; ind < arEL.length; ind++) 
    { 
     arrEl[ind].onchange = xOnChange; 
    } 

} 

in html oder aspx:

<div id="container> 
    <!-- aspx controls --> 
</div>