Seta no select com div e jquery

$  ( document ) . ready( function () {  	$  ( 'div#bloqueioSelect' ) . click( function () {  		if ( $  ( 'div#bloqueioSelect ul' ) . is( ':visible' ) ) 			$  ( 'div#bloqueioSelect ul' ) . css( 'display', 'none' ); 		else 			$  ( 'div#bloqueioSelect ul' ) . css( 'display', 'block' );  	} );  	$  ( 'div#bloqueioSelect ul li' ) . click( function () { 		$  ('input[type=hidden]#bloqueio'). val( $  (this) . val() ); 		alert($  ('input[type=hidden]#bloqueio'). val()) 	} );
div.selecao { 	width: 100px;	 	border: 1px #CCCCCC solid;	 }  div.selecao div { 	display: inline-block; 	height: 30px; 	line-height: 30px; 	text-align: center; } div.selecao div:after { 	width: 40px; 	height: 30px; 	background: url("seta.jpg") no-repeat right #ddd; } div.selecao div, div.selecao ul { 	display: block; 	width: 100%; 	background-color: #F8F8F8; 	border-top: 1px #CCCCCC solid; } div.selecao ul { 	display: none; 	padding: 0; 	margin: 0; } div.selecao  ul li img { 	float: left; }		 div.selecao  ul li { 	display: block; 	width: 100%; 	height: 30px; 	cursor: pointer; 	border-top: 1px #CCCCCC solid; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type=hidden value=' . $  busca->getBloqueio() . '  name=bloqueia id=bloqueia />  <div class=selecao id=bloqueiaSelect> 	<div>Bloqueia</div> 	<ul> 		   <li value=1><img src="imgs/bloquear.png" style="height:30px" title="Bloquear Produto" /></li><!-- 		--><li value=0><img src="imgs/desbloquear.png" style="height:30px" title="Desbloquear Produto"/></li> 	</ul> </div> <br /> <input type=hidden value=' . $  busca->getBloqueio() . '  name=bloqueio id=bloqueio />  <div class=selecao id=bloqueioSelect> 	<div>Bloqueio</div> 	<ul> 		   <li value=1><img src="imgs/bloquear.png" style="height:30px" title="Bloquear Produto" /></li><!-- 		--><li value=0><img src="imgs/desbloquear.png" style="height:30px" title="Desbloquear Produto"/></li> 	</ul> </div>

O objetivo aqui é adicionar uma seta.jpg na div como after mas está aparecendo a seta.

Onde estou errando?

Como seta a primeira posição de uma lista em JSP?

Observem a imagem Gif.

inserir a descrição da imagem aqui

Estou tentando limpar um formulário modal, eu já conseguir limpar os outros campos com javascript, porém não tive o mesmo resultado com a lista, tentei fazer isso pelo back-end, mas não tive também sucesso, então gostaria de ver a possibilidade de tentar setar a posição 0 através do JSP, eu sei que existe o headerKey=”-1″ headerValue=”Selecione”, porém não estou sabendo usar, ele parece realmente funciona, porém não estou sabendo usar, alguém poderia me dar a orientação correta de como setar a primeira posição através do JSP?

Esse é bloco de código em questão!

  <div class="form-group">                   <label class="col-sm-2 control-label"><fmt:message key="label.sagresPessoal.tela.prestacao.unidade.jurisdicionada" /></label>                   <div class="col-sm-8">                    <select id="idUJ" name="prestacaoFolha.idUnidadeGestora"  headerKey="-1" headerValue="Selecione" class="form-control select2 ">                         <option value="-">-</option>                             <c:forEach items="$  {listPessoaJuridica}" var="PJ">                                 <option value="$  {fn:replace(PJ.codigo,'.','')}">$  {PJ.nome}</option>                            </c:forEach>                     </select>                   </div>               </div>