我在表单上应用了jquery插件“jqTransform”(plugin URL)。现在我的要求是当用户选择任何下拉项时,应该更改所选的项颜色。以下是www.clickmeal.imobisoft.eu表格的网址,我也附上了示例图片,以便您更好地理解我的要求。
请帮助我,我知道它需要一些棘手的jquery代码,我是初学者。
以下是示例图片
答案 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 此