Hide and display ComboBox settings of easyui

Today, we have a requirement to switch the other control to text or ComboBox when different options are selected in ComboBox.

At that time, I tried various methods to hide combobx and text, but I didn't get the desired effect. in the end, a div is added to combobx to control the display and hiding of the DIV and to achieve the desired effect.

However, when switching to text or other non-ComboBox, set the value of ComboBox to null.

As shown in:

Original Status:

Result of switching to text:

When switching to ComboBox, the effect is as follows:

 

The code displayed by the control is pasted below

<! -- Used to switch the display text --> <TH id = "th $ {ID}"> </Th> <TD> <! -- Show and hide ComboBox --> <Div id = "hjlxdiv $ {ID}" style = "width: auto; display: none; "> <input name =" hjlx $ {ID} "id =" hjlx $ {ID} "class =" easyui-ComboBox "style =" width: 152px; "data-Options =" valuefield: 'itemid', textfield: 'itemname', URL: 'Warning. lx? Method = viewsysobjectbyid & typeid = 11030 '"/> </div> <! -- Display and hide text --> <input type = "text" name = "yjglh $ {ID}" id = "yjglh $ {ID}" class = "easyui-validatebox" Style = "width: 152px; display: none; "/> </TD>

 

Below is the JS operating:

/* $ {ID} is the ID number passed by spring from the background, which is used to distinguish different control IDs, ignore unnecessary things */$ ("# PCCs" + $ {ID }). comboBox ({// call the onchange method onchange of ComboBox: function ddlchange (OBJ) {var ID =$ {ID}; var hjlx =$ ("# hjlx" + id ); vaR Th1 = $ ("# th" + id); // obtain the DIV control var yjglh = Document of the text control and ComboBox. getelementbyid ("yjglh" + id); var DIV = document. getelementbyid ("hjlxdiv" + id); If (OBJ) {If (OBJ = "1") {// when "Ignore" is selected, set the value of ComboBox to null, and hide th and text in the control to display hjlx. comboBox ('setvalue', ''); th1.text (" based on association number: "); Div. style. display = 'none'; yjglh. style. display = 'block';} else if (OBJ = "3") {// when "" is selected, switch the th value, and set the combobx control to display, hide the text control. th1.text ("letter type:"); Div. style. display = 'block'; yjglh. style. display = 'none';} else {// hide the th, ComboBox, and text controls. var A = hjlx. comboBox ('setvalue', ''); th1.text (" "); Div. style. display = 'none'; yjglh. style. display = 'none ';}}}});

 

Hide and display ComboBox settings of easyui