# DivLeft
{
Float: left;
Width: 300px;
Height: 400px;
Margin-right: 10px;
}
# DivRight
{
Float: left;
Width: 500px;
Height: 600px;
Border: 1px solid red;
}
$ (Function (){
Var strAdd = '';
Var strAddOption = '';
Var strAddOptionValue = '';
$ ('# TxtValue'). blur (function (){
If ($ (this). val () = ''){
$ ('# TxtValue'). val ('Enter the attribute name ');
}
Else {
Var sel2 = $ ('# Select2: checked'). text ();
If (sel2 = 'width '){
StrAdd + = 'width = '+ $ (' # txtValue '). val () + "";
$ ('Span '). text (strAdd );
}
Else if (sel2 = 'height '){
StrAdd + = 'height = '+ $ (' # txtValue '). val () + "";
$ ('Span '). text (strAdd );
}
Else if (sel2 = 'src '){
StrAdd + = 'src = '+ $ (' # txtValue '). val () + "";
$ ('Span '). text (strAdd );
}
Else if (sel2 = 'Multiple '){
StrAdd + = 'Multiple = '+ $ (' # txtValue '). val () + "";
$ ('Span '). text (strAdd );
}
Else if (sel2 = 'value '){
If ($ ('# Select1'). val () = 'select '){
StrAddOptionValue = 'value = '+ $ (' # txtValue '). val () + "";
$ ('Span '). text (strAdd + "" + strAddOption + "" + strAddOptionValue );
}
Else {
StrAdd + = 'value = '+ $ (' # txtvalue'). val () + "";
$ ('Span '). text (strAdd );
}
}
Else if (sel2 = 'class '){
StrAdd + = 'class = '+ $ (' # txtValue '). val () + "";
$ ('Span '). text (strAdd );
}
Else if (sel2 = 'id '){
StrAdd + = 'id = '+ $ (' # txtValue '). val () + "";
$ ('Span '). text (strAdd );
}
Else if (sel2 = 'option '){
StrAddOption + = ''+ $ ('# txtValue'). val () +'' + "";
$ ('Span '). text (strAdd + "" + strAddOption );
}
}
})
$ ('# TxtValue'). focus (function (){
$ ('# TxtValue'). val ('');
})
$ ('# Button1'). click (function (){
Var YSstr = $ ('# Select1'). val ();
If (YSstr = 'img '){
Var str = $ ('');
$ ('# DivRight'). append (str );
}
Else if (YSstr = 'P '){
Var str = $ (''+ $ ('# txtContent'). val () + '');
$ ('# DivRight'). append (str );
}
Else {
Var str = $ (''+ strAddOption + '');
$ ('# DivRight'). append (str );
}
})
})
Element name: pimgselect
Attribute widthheightsrcmultiplevalueclassidoption
Property value: