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

时间:2013-07-10 03:03:14

标签: jquery css

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

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

以下是示例图片

enter image description here

1 个答案:

答案 0 :(得分: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