我使用ul li
JavaScript制作了一个选择选项。它工作正常。问题是我希望在刷新页面后保留相同的选定选项。现在它在页面刷新后重置。
这是我的代码:
HTML:
<dl class="dropdown" id="ajaxselect">
<dt><a href="#"><span>Keywords</span></a></dt>
<dd>
<ul>
<li><a href="#">Start With <span class="value">startwith</span></a></li>
<li><a href="#">Contains <span class="value">contains</span></a></li>
<li><a href="#">End With <span class="value">endwith</span></a></li>
</ul>
</dd>
</dl>
JS:
$(document).ready(function() {
$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
var data = getSelectedValue("ajaxselect");
//alert(data);
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});
});
CSS:
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#5d4617;}
.dropdown dt a:hover { color:#5d4617; border: 1px solid #d0c9af;}
.dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; border:1px solid #d4ca9a; color:#C5C0B0; display:none;
left:0px; top:2px; width:auto; list-style:none;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}
.dropdown dd ul li a:hover { background-color:#d0c9af;}
任何解决方案?感谢。