刷新页面后保持相同的选择选项(使用ul li)

时间:2015-04-17 07:20:56

标签: javascript jquery select

我使用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;}

任何解决方案?感谢。

0 个答案:

没有答案