如何以编程方式更改HTML选项标记颜色?

时间:2013-11-13 13:13:14

标签: jquery html jsp struts-1

我想在选择组合“#accountSelector”中使用CODE!=“abc012345”将项目变为蓝色;

我尝试了以下解决方案并且它正常工作但是有代码复制(“选项”标记的内容被复制到IF ELSE语句中。)

如何更改选项标签的颜色以避免代码复制?有没有javascript / jquery清洁解决方案?

<table border="0" cellPadding="0" cellSpacing="0" >
    <logic:notEmpty name="enabledReportsList" >
        <tr>
            <td>
            <select id="accountSelector" name="accountSelector" style="WIDTH: 380px" class="comboFilter" onChange="preSubmit();document.changeReports.submit()">                
                    <logic:iterate id="cc" indexId="ccn" name="enabledReportsList" >        
                     <% if (!( ((it.myproject.common.Report)cc).getCode() ).equals("abc012345")){%>             
                        <option style="color:blue" value="<bean:write name="cc" property="Report"/>" <%= ( ((it.myproject.common.Report)cc).getReport() ).equals(session.getAttribute("accountSelector")) ? "selected" : "" %> >
                            <bean:write name="cc" property="fullValue"/>
                        </option>
                      <%} else {%>
                      <option value="<bean:write name="cc" property="Report"/>" <%= ( ((it.myproject.common.Report)cc).getReport() ).equals(session.getAttribute("accountSelector")) ? "selected" : "" %>>
                            <bean:write name="cc" property="fullValue"/>
                        </option>
                       <%}%>
                    </logic:iterate>
            </select>                   
            </td> 
            <td class="filterheader">
                <b><bean:message key="selector.account" arg0="${fn:length(enabledReportsList)}"/></b>
            </td>
        </tr>
    </logic:notEmpty>

    <logic:empty name="enabledReportsList" >
       <tr>
          <td class="filterheader">
           <bean:message key="ENABLED_REPORTS.combo.empty"/>
          </td>
       </tr>
    </logic:empty>

</table>

3 个答案:

答案 0 :(得分:2)

这很简单:

  1. 在没有任何输出的情况下计算Java代码块中样式的值:

     <% 
     String style = "";
     if( ... ) {
         style = "style='color:blue' ";
     }
     %>
    
  2. 使用变量:

    <option <%=style%>value="...
    
  3. 请注意,您有责任正确转义变量的内容。在JSP编译器生成的Java代码中,您将获得:

     out.write("<option ");
     out.write(style);
    

    即。该字符串将按原样传递给客户端。

答案 1 :(得分:1)

尝试使用EL:

<option ${cc.report eq 'abc012345'? 'style="color:blue"' : ''} value="<bean:write name="cc" property="Report"/>" <%= ( ((it.myproject.common.Report)cc).getReport() ).equals(session.getAttribute("accountSelector")) ? "selected" : "" %> >

答案 2 :(得分:0)

这样的事情可能有用:

<select ...>
<%
    var optionClass = "option-white"

    loop(...)
        if(samething.equals("abc012345"))
            optionClass = "option-blue"
%>
    <option class="<%:optionClass%>" value="1">Test</option>
<%end loop%>
</select>

您可以使用简单的JQuery代码来保留当前所选选项的颜色