Создайте URL на основе выбора в <ul> <li>

Question

Создайте URL на основе выбора в <ul> <li>

0

Я пытаюсь создать 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

Есть ли у кого-нибудь какие-либо идеи относительно того, как это можно сделать.

user3380655 04 март 2014, в 22:07

Источник

0

Вам нужно либо использовать куки-файл для сохранения ввода пользователя, либо вы можете использовать скрытое поле с идентификатором, чтобы сделать это. Продолжайте извлекать данные всякий раз, когда есть изменения. Вам нужно обработать сценарий, чтобы запретить пользователю делать выбор упорядоченным образом, иначе пользователь сможет сделать выбор по своему желанию, что приведет к путанице во всех URL-адресах.
Akhilesh Sharma 04 март 2014, в 20:40

Теги:

javascript

jquery

html

deployment

2 ответа

Ещё вопросы

Вам нужно либо использовать куки-файл для сохранения ввода пользователя, либо вы можете использовать скрытое поле с идентификатором, чтобы сделать это. Продолжайте извлекать данные всякий раз, когда есть изменения. Вам нужно обработать сценарий, чтобы запретить пользователю делать выбор упорядоченным образом, иначе пользователь сможет сделать выбор по своему желанию, что приведет к путанице во всех URL-адресах.

Theodore_Kim · Answer 1 · 2014-03-04T19-22-00.000Z

Хорошо, есть несколько вариантов, я бы предложил использовать javascript.

Итак, в основном, вы бы проверили, было ли нажато <li> и если это было, затем добавьте определенное значение в строку, перенаправив страницу с помощью встроенной строки. Вот пример того, что я имею в виду:

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

13ruce1337 · Answer 2 · 2014-03-04T18-32-00.000Z

Вот пример того, как $(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.
                    });