根据 <ul> <li> 中的选择创建 URL答案

【问题标题】：Create a URL based on Selection in <ul> <li>根据 <ul> <li> 中的选择创建 URL
【发布时间】：2014-03-04 20:37:20
【问题描述】：

我正在尝试根据多级列表中的用户选择来构建 url。用户选择四个选项，依次创建检索文档所需的 url。

例子：

<ul id="nav">
   <li><a href="#">Report name</a>
      <ul>
         <li><a href="#">Year</a>
            <ul>
           <li><a href="#">2010</a>
                  <ul>
                     <li>Jan</li>
                     <li>Feb</li>
                     <li>March</li>
                 </ul>
             </li>
             <li><a href="#">2011</a></li>
             <li><a href="#">2012</a></li>
             <li><a href="#">2013</a></li>
             <li><a href="#">2014</a></li>
         </ul>
     </li>
 </ul>
</li>

<!-- etc. -->

</ul>

所以我会选择报告名称 > 年份 > 月份，这将构建一个等于文件路径的 url。

例如http://www.example.com/Report1/2010/Jan

是否有人可能对如何做到这一点有任何想法。

【问题讨论】：

您要么需要使用 cookie 来保存用户输入，要么可以使用带有 ID 的隐藏字段来完成此操作。只要有变化，就继续提取数据。您需要处理这种情况以限制用户以有序的方式进行选择，否则用户将能够随意进行选择，这会弄乱所有 URL。

标签： javascript jquery html deployment

【解决方案1】：

这是一个使用$(this) 获取点击值的示例。我在这个例子中使用了 JQuery。

必须将id 添加到年份值。您不必这样做，您可以使用 jquery 选择器来获取正确的值。就简单多了。

<ul id="nav">
<li><a href="#">Report name</a>
      <ul>
         <li><a href="#">Year</a>
            <ul>
           <li id='2010'><a href="#">2010</a>
                  <ul>
                     <li>Jan</li>
                     <li>Feb</li>
                     <li>March</li>
                 </ul>
             </li>
             <li><a href="#">2011</a></li>
             <li><a href="#">2012</a></li>
             <li><a href="#">2013</a></li>
             <li><a href="#">2014</a></li>
         </ul>
     </li>
 </ul>
</li>

<!-- etc. -->

</ul>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>

javascript 看起来像这样：

$('#2010 li').click(function()
                    {
                        var year=$(this).parent().parent().attr('id');
                        var month=$(this).text();
                        console.log(month+' '+year);
                        //this will show you Jan and 2010 in the log. You can use this variable to append to a URL string.
                    });

【讨论】：

【解决方案2】：

好的，有几个选项，我建议使用 javascript。

因此，基本上，您将检查是否单击了<li>，如果是，则将某个值添加到字符串，使用该构建的字符串重定向页面。这是我的意思的一个例子：

http://jsfiddle.net/35XDn/4/

【讨论】：