C # add and delete tags (select tag and style)

A new project in the company has a very attractive feature .. it is also common on many websites. Although tags are dynamically bound with repeater and can be used with onitemcommand, this is complicated in the background and the page will be refreshed when tags are selected, this is not advisable. there seems to be no relevant information on the Internet. Here I use js to do this function, and I will share it with you now. I hope you can give me a thumbs up and pay more attention to me ~

 

When you click the Darren label again, the figure is as follows:

I used a random color method to bind the tag here. JS is fully written. Click the label above the text box below to add the tag value and add the style to the tag, when this label is added again, the label style is canceled and the value in the text box is removed, because the labels must be limited to three in project planning. here, no matter whether it is a handwritten tag or a self-selected tag, I have no more than three controls. (there is only one Tag Name and tag ID in the database). I am running the Code:

Tag bound to the foreground:

Method for random color of background labels:

Called JS:

// How to click a tag
Function markselectbyid (a, B ){
VaR M = Document. getelementbyid ("tx_markname ");
VaR num = 0;
If (Num <= 3 & $ ("# lbl_markselect" + B + "" ).css ("background-color") = "Transparent") // no selection
{
If (M. value! = ""){
If (M. value. substr (M. value. Length-1 )! = ""){
M. Value + = "";
}
VaR S = $ ("# tx_markname"). Val (). Split (""); // traverse the text box
If (S. Length <4 ){
M. Value + = a + "";
$ ("# Lbl_markselect" + B + "" ).css ("background-color", "# f2eada ");
}
} Else {
M. Value + = a + "";
$ ("# Lbl_markselect" + B + "" ).css ("background-color", "# f2eada"); // set it to ivory after it is selected
}
Num + = 1;
}
// Select the selected tag and click "Remove style" again. The corresponding values in the text box are also removed.
Else {
// If no space is given at the end of the text box, a space is given by default.
If (M. value. substr (M. value. Length-1 )! = ""){
M. Value + = "";
}
$ ("# Lbl_markselect" + B + "" ).css ("background-color", "Transparent ");
M. value = M. value. Replace (a + "","");
Num-= 1;
}
}

VaR m; // The value when the three tags are saved to control the value exceeding the tag
// Method for changing the text box Value
Function matkchange (){
VaR G = $ ("# tx_markname"). Val ();
// Clear the first space
If (G = ""){
$ ("# Tx_markname"). Val ("");
}
// Two consecutive spaces are not allowed.
If (G. substr (G. Length-) = "" & G. substr (G. Length-) = ""){
$ ("# Tx_markname"). Val (G. substr (0, G. Length-1 ));
}
// Clear all styles
$ (". Cs_mark"). Each (function (){
Certificate (this).css ("background-color", "Transparent ");
});
VaR S = $ ("# tx_markname"). Val (). Split (""); // traverse the text box
VaR num = S. Length-1;
If (num = 3 ){
VaR lastindex = $ ("# tx_markname"). Val (). lastindexof ("");
M = $ ("# tx_markname"). Val (). substr (0, lastindex + 1 );
$ ("# Tx_markname"). Val (m );
}
If (Num> 3 ){
$ ("# Tx_markname"). Val (m );
}
VaR J = $ ("# tx_markname"). Val (). Split ("");
$. Each (J, function (){
VaR A = This; // each element in the text box
$ (". Cs_mark"). Each (function (){
If (A = This. Text ){
Certificate (this).css ("background-color", "# f2eada ");
}
});
});
}

If you don't know anything, you can add QQ: 357253950 for communication ~