2

HTML 選択ボックスのルック アンド フィールを変更する HTML テンプレートがあります。

 <select id='floorinput' class='select multiple-as-single easy-multiple-selection check-list allow-empty' multiple style="width:100px"></select>

テンプレートは、クラスを使用して選択ボックスを美しくします。選択ボックスのオプションは、ajax 呼び出しの結果によって取り込まれており、正しく機能しています。選択ボックスは最終的にブラウザで次のようにレンダリングされます。

<span class="select multiple-as-single easy-multiple-selection check-list allow-empty replacement" style="width: 97px; " tabindex="0">
    <span class="select-value alt">All</span>
    <span class="select-arrow"></span>
    <span class="drop-down custom-scroll" style="">
    <span class="selected"><span class="check"></span>Floor-1</span>
    <span class="selected"><span class="check"></span>Floor-2</span>
    .....
    <div class="custom-vscrollbar" style="display: none; ">
       <div></div>
    </div></span>
    <select id="floorinput" class="" multiple="" style="width: 100px; display: none; " tabindex="-1">
       <option value="Floor-1" selected="selected">Floor-1</option>
       <option value="Floor-2" selected="selected">Floor-2</option>
    </select>
</span>

テンプレートは、実際の選択ボックスを非表示にし、代わりに派手な選択ボックスをレンダリングすることで機能します。

この選択ボックスでマウスのクリックをシミュレートしたい。目的は、すでに選択されているオプションの選択を解除することです。テンプレート コードは、#floorInput (実際の html 入力) のオプションに対するプログラムによるクリックを処理できません。そこで、次のようにスパンをクリックすることにしました。

var j = 0;
//DEselect selected floors programtically
$("#floorinput option").each(function () {
    if ($(this).attr("selected") == "selected") {
        console.log('should deselect this:' + $(this).text());
        $('.select-value.alt').click();//simulate click to open dropdown
        $('.drop-down.custom-scroll span.check')[j].click();//perform click. ERROR here
    }
    else {
        console.log('already selected :' + $(this).text());
    }
    j++;
});

Windows 7 で chrome バージョン 22.0.1229.94 m を使用しています。コードは次のようなエラーをスローします。

Uncaught TypeError: Cannot call method 'click' of undefined

しかし、Chrome のコンソールから同じメソッドを呼び出すと、期待どおりに動作します。

$('.select-value.alt').click();
$('.drop-down.custom-scroll span.check')[0].click();//select or deselect first option

問題の考えられる原因は、$('.select-value.alt').click(); の呼び出しの直後に選択ボックスのマークアップが使用できない可能性があります。しかし、いくつかの方法で2番目のメソッド呼び出しを遅らせようとしましたが、うまくいきません。

jquery メソッドがコンソールを介して機能しているが、実際の実行中は機能していないシナリオはありますか? 助けてください。PS: スパム防止のため、スクリーンショットをアップロードできません :(.

4

0 に答える 0