Use Jquery to implement a drop-down menu that can input values ​​​​prototype_jquery

After searching online, there are a bunch of ready-made controls, but I need to understand the ready-made controls and apply them in combination with my current system. It will take a lot of time. The cost of this time should be about the same as making one myself
Then I might as well If you make one yourself, you can better understand how it works, and it will be easier to use it later.
My goal is to use this as a control and reduce the coupling of external programs. That is to say, the necessary conditions for the use of external programs should be reduced as much as possible, so as not to forget to add any settings. The program hangs.
If possible or even desirable, only one Jquery needs to be referenced and the other JavaSciprts are generated programmatically.
Finally, I hope it can be used in combination with the dynamic controls mentioned before. Today I will study it first and use the following html prototype to test the feasibility first. After confirming that it is correct, I will start to change it to ASP. NET controls.
This program has several important issues that need attention:
How the drop-down menu is triggered, how to draw the content of the drop-down menu, the capture triggered by the menu event, and where the value should be stored after capturing the selection event
After the above problems are solved, they will be rewritten in ASP.NET later, so when designing the prototype, you need to pay attention to whether it can be applied to ASP.NET
The idea is as follows:
This is mine The plan is to design a button to be triggered by its OnClick event. At that time, JQuery will capture the menu array dynamically generated by ASP.NET to dynamically generate the menu.
The generated menu must be able to set three events: mouseover mouseout click, the first two are for aesthetics, so that the user knows that there is an action. After the click event is triggered,
stores the selected value in the asp.net server control TextBox, so that the value can be passed back in PostBack The server side handles it.

Copy code The code is as follows:

");
$("#divPop").append("

test2

");
/ /Bind event processing
$("#btnDDL").click(function (event) {
//Cancel event bubbling
event.stopPropagation();
//Set the popup layer position
var offset = $(event.target).offset();
//alert($(event.target).width());
var inID = $(this).get(0 ).getAttribute("inputid");
//Set the width of the drop-down menu based on the input and button width
$("#divPop")[0].style.width = ($("#" inID ).width() $(this).width() 10) "px";
//Click on the blank area to hide the pop-up layer
$(document).click(function (event) { $(" # divPop").hide(speed) });
//Set the position where the drop-down menu is displayed
$("#divPop").css({ top: offset.top $(event.target). height () 10 "px", left: offset.right });
//Switch the display state of the pop-up layer
$("#divPop").toggle(speed);
});
});

< ;br />
▼