Hi, guys.
I'm trying to implement DropDownChoice that could render <select> tag with
possiblity to add style with css.
What do I mean:
<select> tag rendering is OS dependent. So, plain <select> element is always
ugly. There is no possibility to change arrow, or border of drop down list
only with css.
One of the ways to resolve this problem is to add <span> tag before <select>
tag to show currently selected value, then apply to it desired background
and any desired styles and give <select> tag's opacity zero value. So, drop
down menu would appear any time user clicks on span element. To push
selected value to span onChange method for <select> tag is appropriated.
So, I've created this class:
<code>
public class StyledDropDownChoice<T> extends DropDownChoice<T> {
....
/*Here goes constructors and StyleDropDownSpan is added as behavior. */
....
@Override
protected void onComponentTag( ComponentTag tag ) {
tag.put( "onChange", "var span = document.getElementById('" +
getMarkupId()
+ "-span'); var select = document.getElementById('" +
getMarkupId()
+ "'); span.innerHTML = select.options[
select.selectedIndex ].innerHTML;" );
//todo move javascript output to renderJavascript( CharSequence,
String )
super.onComponentTag( tag );
}
private class StyledDropDownSpan extends AbstractBehavior {
@Override
public void onComponentTag( Component component, ComponentTag tag )
{
replaceComponentTagBody( getMarkupStream(), tag,
"<span class=\"combobox\" id=\"" +
component.getMarkupId()
+ "-span\">" + component.getDefaultModelObjectAsString()
+ "</span>" );
super.onComponentTag( component, tag );
}
}
}
</code>
So, this code works fine with usual drop down choices. But, when I'm trying
to update list of choice via AJAX call, another span element appear on the
page. So, I get that <span> tag is added any time dropdownchoice is
rendered. Could you help me to resolve this issue?
Best regards, Alexander.
