0

我已经得到了前端设计师设计的这个网站。当页面在浏览器中运行时，所有选择框都会重新设置样式。问题是我想显示以前选择的值，但如果我不能为修改后的选择分配唯一的 ID，我不知道该怎么做。这是修改后的下拉html：

<div unselectable="on" style="-webkit-user-select: none; -webkit-tap-highlight-color:
rgba(255, 255, 255, 0); width: 66px; " class=" select-area select-modify_select  
select-focus ">
 <span class="left"></span>
  <span class="center">B.N.S.</span>
  <a class="select-opener"></a>
</div>

<select name="ach_bank" id="ach_bank" class="modify_select jcf-hidden" 
style="-webkit-tap-highlight-color: rgba(255, 255, 255, 0); ">

                    <option value="">Select...</option>
                    <option value="B.N.S.">B.N.S.</option>                
                    <option value="F.G.B.">F.G.B.</option>                
                    <option value="N.C.B.">N.C.B.</option>                
                    <option value="R.B.C.">R.B.C.</option>                
</select>

如您所见，常规选择框已隐藏，并创建了修改后的下拉菜单。修改选择框的代码在这里：

// custom select module
jcf.addModule({
name:'select',
selector:'select',
defaultOptions: {
    handleDropPosition: true,
    wrapperClass:'select-area',
    focusClass:'select-focus',
    dropActiveClass:'select-active',
    selectedClass:'item-selected',
    disabledClass:'select-disabled',
    valueSelector:'span.center',
    optGroupClass:'optgroup',
    openerSelector:'a.select-opener',
    selectStructure:'<span class="left"></span><span class="center"></span>
            <a  class="select-opener"></a>',
    selectPrefixClass:'select-',
    dropMaxHeight: 200,
    dropFlippedClass: 'select-options-flipped',
    dropHiddenClass:'options-hidden',
    dropScrollableClass:'options-overflow',
    dropClass:'select-options',
    dropClassPrefix:'drop-',
    dropStructure:'<div class="drop-holder"><div class="drop-list">
            </div></div>',
    dropSelector:'div.drop-list'
},

但是，我不知道如何修改脚本以为每个创建的选择创建一个唯一的 ID。

我知道修改将属于这一行：

selectStructure:'<span class="left"></span><span class="center" **id="someid"**></span>
            <a  class="select-opener"></a>',

如果我在代码中放置一个 id，那么所有修改后的选择都具有相同的 id。有没有办法来解决这个问题？

4

1 回答 1

0

当我从外部来源收到前端标记时，我遇到了同样的问题。事实证明，这是一个简单的解决方案！

在 jQuery 中，目前是这样写的：

selector:'select',

它选择所有“选择”元素并将样式应用于每个元素。为了解决这个问题，在这一行添加一个类名或 id，如下所示：

selector:'select.classname',

或者

selector:'select#idname',

然后只需将类名或 id 应用于您希望应用自定义样式的选择字段。

于 2013-03-08T23:58:25.087 回答