0

フォームに jquery プラグイン「jqTransform」(プラグイン URL ) を適用しました。今私の要件は、ユーザーがドロップダウン項目を選択したときに、選択した項目の色を変更する必要があることです。ここにwww.clickmeal.imobisoft.euというフォームの URL があります。私の要件をよりよく理解できるように、例の画像も添付しました。

これで私を助けてください、私はそれがいくつかのトリッキーなjqueryコードを必要とすることを知っています、そして私はそれの初心者です。

以下はサンプル画像です

ここに画像の説明を入力

4

1 に答える 1

1

現在表示されている色は、この css ルール (style.css) によって適用されます。変更または削除できます。

#content_area .order_form .form .show_everything .jqTransformSelectWrapper {
width: 224px !important;
height: 33px;
line-height: 41px;
border: none;
margin-left: -5px;
margin-top: 0;
text-indent: 12px;
font-size: 18px;
color: #dad9d9; /*This needs to be removed or changed*/
font-weight: normal;
border-radius: 14px;
box-shadow: inset 1px 3px 5px #cccccc;
cursor: pointer;
}

また、このルールを css ファイルに追加します。

 .defaultOption {
     color: #dad9d9;
 }

これとは別に、これをスクリプトの次の直後に追加します。

$(function() {
    $('.remember , .show_everything').jqTransform({ imgPath: 'app_themes/images/img/' });
       /*Add start*/

    //Add the default option class initially since the default option wil Show Everything
    $(".show_everything").find('.jqTransformSelectOpen').prev('span').addClass('defaultOption');

    //Bind a click event to the plugin control anchor dropdown
    $(".show_everything div.jqTransformSelectWrapper ul li a").click(function (e) {
        e.preventDefault();
        //Get the span element which shows selected text
        var parent = $(this).closest('.jqTransformSelectWrapper').find('.jqTransformSelectOpen').prev('span');
        //Remove the class
        parent.removeClass('defaultOption');
        //Check if clicked option text matches  the target, if so add the default option class to it.
        if ($(this).text().match(/Show Everything/i)) {
            $(this).closest('.jqTransformSelectWrapper').find('.jqTransformSelectOpen').prev('span').addClass('defaultOption');
        }

    });
    /*Add end*/

});

$(document).ready(function() {
   $(".show_everything").click(function() {
     $(".show").slideToggle();
  });
});

これのデモ

于 2013-07-10T03:07:01.850 に答える