我正在尝试实现此处的选择 - 选项。
当您按下演示按钮时,您可以在线查看选择选项。不幸的是,当您单击第二个选项时,它似乎没有被选中..默认值仍然存在..
不幸的是我花了太多时间试图修改CSS文件,现在我被困在这里!!
你能弄清楚选择不正常的原因吗?
这是我的代码:http://jsfiddle.net/Y86Qj/
$(".dropdown dt a").click(function(){
if($(this).hasClass("open")) {
$(this).blur();
return false;
}
$(this).addClass("open");
$(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast');
return false;
}).blur(function() {
$(this).removeClass("open");
$(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast');
});
$(".dropdown dd ul a").click(function() {
var text = $(this).html();
$(this).closest("dt").find("a").html(text);
$(this).parents("ul").hide();
$(this).closest("select").val($(this).find("span.value").html());
return false;
});
/* Fancy Dropdowns */
function FancyDropdowns(selector){
$(selector).each(function () {
var source = $(this);
var selected = source.find("option[selected]");
var options = $("option", source);
var markup = '<dl class="dropdown">';
markup += '<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>';
markup += '<dd><ul>';
options.each(function () {
markup += '<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>';
});
markup += '</ul></dd>';
markup += '</dl>';
source.after(markup);
source.hide();
});
}
$(document).ready(function () {
FancyDropdowns(".dropdown.fancy");
$(".dropdown dt a").click(function(){
if($(this).hasClass("open")) {
$(this).blur();
return false;
}
$(this).addClass("open");
$(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast');
return false;
}).blur(function() {
$(this).removeClass("open");
$(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast');
});
$(".dropdown dd ul a").click(function() {
var text = $(this).html();
$(this).closest("dt").find("a").html(text);
$(this).parents("ul").hide();
$(this).closest("select").val($(this).find("span.value").html());
return false;
});
});
答案 0 :(得分:0)
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(".dropdown dt a").click(function(){
if($(this).hasClass("open")) {
$(this).blur();
return false;
}
$(this).addClass("open");
$(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast');
return false;
}).blur(function() {
$(this).removeClass("open");
$(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast');
});
$(".dropdown dd ul a").click(function() {
var text = $(this).html();
$(this).closest("dt").find("a").html(text);
$(this).parents("ul").hide();
$(this).closest("select").val($(this).find("span.value").html());
return false;
});
/* Fancy Dropdowns */
function FancyDropdowns(selector){
$(selector).each(function () {
var source = $(this);
var selected = source.find("option[selected]");
var options = $("option", source);
var markup = '<dl class="dropdown">';
markup += '<dt><a href="#">' + selected.text() + '<span class="value">' + selected.val() + '</span></a></dt>';
markup += '<dd><ul>';
options.each(function () {
markup += '<li><a href="#">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></a></li>';
});
markup += '</ul></dd>';
markup += '</dl>';
source.after(markup);
source.hide();
});
}
$(document).ready(function () {
FancyDropdowns(".dropdown.fancy");
$(".dropdown dt a").click(function(){
if($(this).hasClass("open")) {
$(this).blur();
return false;
}
$(this).addClass("open");
$(this).closest(".dropdown").find("ul").animate({opacity: 'show', height: 'show'}, 'fast');
return false;
}).blur(function() {
$(this).removeClass("open");
$(this).closest(".dropdown").find("ul").animate({opacity: 'hide', height: 'hide'}, 'fast');
});
$(".dropdown dd ul a").click(function() {
var text = $(this).html();
$(this).closest("dt").find("a").html(text);
$(this).parents("ul").hide();
$(this).closest("select").val($(this).find("span.value").html());
return false;
});
});
</script>
<style>
/* NICER DROPDOWNS */
.dropdown dd, .dropdown dt, .dropdown ul {
margin: 0;
padding: 0;
}
.dropdown dd {
position: relative;
}
.dropdown a,.dropdown a:visited {
color: #666;
text-decoration: none;
outline: none;
}
.dropdown a:hover {
color: #e85326;
}
.dropdown dt a:hover {
color: #e85326;
}
.dropdown dt a {
background: #fff url("dropdown-arrow.png") no-repeat scroll right center;
display: block;
border: 1px solid #666;
width: 160px;
padding: 5px;
}
.dropdown dt a span {
cursor: pointer;
display: block;
}
.dropdown dd ul {
background: #fff none repeat scroll 0 0;
border: 1px solid #666;
color: #666;
display: none;
left: 0;
position: absolute;
top: 2px;
width: auto;
min-width: 170px;
list-style: none;
padding: 5px 0;
}
.dropdown dd ul li a {
display: block;
padding: 5px;
}
.dropdown dd ul li a:hover {
background-color: #333;
}
.dropdown img.flag {
border: none;
vertical-align: middle;
margin-left: 10px;
}
.dropdown span.value,.flagvisibility {
display: none;
}
</style>
</head>
<body>
<select name="myselect-id" class="dropdown fancy">
<option selected="selected" value="25">Test 25</option>
<option value="26">Test 26</option>
<option value="27">Test 27</option>
<option value="28">Test 28</option>
<option value="29">Test 29</option>
<option value="30">Test 30</option>
</select>
</body>
</html>
答案 1 :(得分:0)
JS中有一个错误的选择规则。
$(this).closest("dt").find("a").html(text);
这是应该更新所选选项文本的行。它永远不会起作用,因为.closest('x')
遍历最初调用元素的父元素,直到它达到root
。因为它所寻找的元素与其中一个父母相邻,所以它永远找不到它。用以下内容替换该行:
$(this).closest("dd").siblings("dt").find("a").html(text);
意味着它会找到它,通过找到您寻找的项目所在的最近的父项。