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',

すべての「select」要素を選択し、それぞれにスタイルを適用します。これを修正するには、次のように、この行にクラス名または ID を追加します。

selector:'select.classname',

また

selector:'select#idname',

次に、カスタム スタイルを適用する選択フィールドにクラス名または ID を適用するだけです。

于 2013-03-08T23:58:25.087 に答える