Javascript Jquery CSS范围不为'；t无法在Select功能表上正常工作_Javascript_Jquery_Css_Jquery Ui_Scope

Javascript Jquery CSS范围不为'；t无法在Select功能表上正常工作

javascript jquery css jquery-ui

Javascript Jquery CSS范围不为'；t无法在Select功能表上正常工作,javascript,jquery,css,jquery-ui,scope,Javascript,Jquery,Css,Jquery Ui,Scope,我的页面：JSP+Struts2标记+JQuery库+JqueryUI 我有一个JQuery selectmenu和两个JQuery UI主题，我想用第二个JQuery UI主题（css范围）设置selectmenu的样式，但是我的selectmenu的内容区域（选项标记的背景）是用第一个主题设置的我该怎么办以下是我的一些代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

我的页面：JSP+Struts2标记+JQuery库+JqueryUI

我有一个JQuery selectmenu和两个JQuery UI主题，我想用第二个JQuery UI主题（css范围）设置selectmenu的样式，但是我的selectmenu的内容区域（选项标记的背景）是用第一个主题设置的

我该怎么办

以下是我的一些代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<sj:head jqueryui="true" jquerytheme="orange" customBasepath="css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
    /* selectmenu css */
        fieldset { border:0;  margin-bottom: 40px;} 
        label,select,.ui-select-menu { float: right; }
        select { }
        /*select with custom icons*/
        body a.customicons { height: 2.8em;}
        body .customicons li a, body a.customicons span.ui-selectmenu-status { line-height: 2em; padding-left: 30px !important; }
        body .video .ui-selectmenu-item-icon, body .podcast .ui-selectmenu-item-icon, body .rss .ui-selectmenu-item-icon { height: 24px; width: 24px; }
    /* /selectmenu css */
</style>

        <!-- JQuery --><link type="text/css" href="css/orange/jquery-ui.custom.css" rel="stylesheet"/>
        <!-- JQuery --><script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>

        <!-- interiorTheme --><link type="text/css" rel="Stylesheet" href="css/interior_uilightness/jquery-ui-1.8.13.custom.css">

        <!-- selectMenu --><link type="text/css" rel="Stylesheet" href="css/element/jquery.ui.selectmenu.css">
        <!-- selectMenu --><script type="text/javascript" src="js/element/jquery.ui.selectmenu.js"></script>

<script type="text/javascript">
    //--selectmenu
        $(function(){
            $('select#buy_groupBy').selectmenu({
                width: 220,
                maxHeight: 400,
                style:'popup',
                format: addressFormatting
            });
        });
    //a custom format option callback
        var addressFormatting = function(text){
            var newText = text;
            //array of find replaces
            var findreps = [
                {find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
                {find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
                {find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
                {find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
                {find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
            ];

            for(var i in findreps){
                newText = newText.replace(findreps[i].find, findreps[i].rep);
            }
            return newText;
        }
    //--/selectmenu
</script>

</head>
<body>


                                        <div class="interior_UILightness">
                                        <s:form action="buy.action" method="post" onsubmit="return validateBuy()" cssStyle="margin-top:-5px;">
                                            <tr><td></td><td><s:hidden name="selectedGame"/></td></tr>
                                            <s:select name="groupBy" label="xxxx" list="#{'1':'1','2':'2','3':'3'}" cssStyle="width:220px;"/>
                                            <s:textfield name="symbol" label="xxxx" readonly="true" cssClass="strutsBuyTextField"/>
                                            <s:textfield id="price" name="price" maxlength="16" label="xxxx" readonly="true" cssClass="strutsBuyTextField"/>
                                            <s:textfield name="shares" maxlength="7" label="xxxx" cssClass="strutsBuyTextField" onkeyup="showDetails();" onkeydown="hideMessage();"/>
                                            <s:submit value="xxxx" name="buySubmit" cssClass="submit" cssStyle="margin-right:80px"/>
                                        </s:form>
                                        </div>

</body>
</html>


/*选择功能表css*/
字段集{边框：0；边距底部：40px；}
标签，选择，.ui选择菜单{float:right；}
选择{}
/*使用自定义图标选择*/
主体a.customicons{高度：2.8em；}
body.customicons li a，body a.customicons span.ui-selectmenu-status{行高：2em；左侧填充：30px！重要；}
body.video.ui选择菜单项图标，body.podcast.ui选择菜单项图标，body.rss.ui选择菜单项图标{高度：24px；宽度：24px；}
/*/selectmenu css*/
//--选择功能表
$（函数（）{
$（'select#buy_groupBy'）。选择功能表({
宽度：220，
最大高度：400，
样式：'popup'，
格式：addressFormatting
});
});
//自定义格式选项回调
var addressFormatting=函数（文本）{
var newText=文本；
//查找替换的数组
变量findreps=[
{find://（[^\-]+）\-/g，rep:'$1'}，
{find:/（[^\|>我认为您需要在之前添加主题。如果主题不在默认目录中，struts jQuery插件用于指定主题的路径
因此，我认为您需要下载自定义主题，并提供CSS作用域和主题文件夹名称，然后将customBasepath
更改为具有主题文件夹名称的目录。
我知道这个问题是在3年前提出来的，但我会为那些人回答（像我一样）他在寻找完全相同的问题时发现了这个话题
我假设您的选择框位于第二个主题的CSS范围内的某个div中，例如：
<div class="scope2" id="select-div">
    <select id="select"></select>
</div>



在这种情况下，如果查看selectmenu的API，可以找到有关菜单的appendTo
属性的信息。如果未传递任何值，则包含可展开菜单的div将放置在页面正文的某个位置，可能位于底部。在这种情况下，带有“”的div以及所有
元素将不会被放置在scope2
类的范围内，这就是为什么菜单的样式为第一个主题
$（'#select'）。selectmenu（{appendTo:'#select div'}）
会起作用
代码太多，只显示相关的part@Ibu：我只是想显示struts主题标签，可能与某些东西有冲突！请先调用必需的主题，或更改样式names@Max：我以前做过：（，它不起作用，谢谢我想这不是Struts的问题（或我的Struts问题）！我尝试了没有Struts主题定义的代码，但什么都没有！谢谢你，伙计。