jquery - jqTransform - 组合框选择的文本颜色更改问题

Question

我在表单上应用了 jquery 插件“jqTransform”(plugin URL)。现在我的要求是当用户选择任何下拉项时，应更改所选元素的颜色。这是表格的 URL www.clickmeal.imobisoft.eu我还附上了示例图片，以便您更好地理解我的要求。

请帮助我，我知道它需要一些棘手的 jquery 代码，而我是初学者。

下面是示例图片

Answer 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();
  });
});

Demo 这个