Как выбрать значение выпадающего с UL

Question

Вот мой код, и он не выбирает значение из выпадающего списка.

Я пробовал много разных способов, но не работает

<div class="container" style="height: 0;">
    <ul class="psh__dpdw ">
        <li class="button-dropdown">
            <a class="dropdown-toggle">
                 Prishtinë <!-- here should be desplayed the dropdown-menu list when i click -->
                 <img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
            </a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
            <a href="{{helper:site_url}}prokuroria_themelore/{{category_id}}/{{url_title}}/{{category_id}}{{entry_id}}" name="alphabet">{{special}}</a> {{ /content:categories }}


            <!--<ul class="dropdown-menu">
                <li>
                  <a href="prosecutor-pr.html">Prishtinë</a>
                </li>
                <li>
                  <a href="prosecutor-gl.html">Gjilan</a>
                </li>
                <li>
                  <a href="prosecutor-pz.html">Prizren</a>
                </li>
                <li>
                  <a href="prosecutor-pj.html">Pejë</a>
                </li>
                <li>
                  <a href="prosecutor-mt.html">Mitrovicë</a>
                </li>
                <li>
                  <a href="prosecutor-gj.html">Gjakovë</a>
                </li>
                <li>
                  <a href="prosecutor-fr.html">Ferizaj</a>
                </li>
          </ul> -->
        </li>
    </ul>
</div>


<script>
    $('.dropdown-menu li').find('a').change(function() {
        var dropdown = $(this).closest('.dropdown-toggle');
        var radioname = $(this).attr('name');
        var checked = 'a[name=' + radioname + ']:checked';

        //update the text
        var checkedtext = $(checked).closest('.dropdown-menu li').text();
        dropdown.find('a').text(checkedtext);

        //retrieve the checked value, if needed in page 
        var thisvalue = dropdown.find(checked).val();
        alert(thisvalue);

    });
</script>**

Кнопка, где вы нажимаете на каплеВниз меню, я хочу отобразить значение в части кнопки.Кроме того, я использую код CMS, так что, любое предложение?

Как я могу решить эту проблему?

Answer 1

Сначала вам нужно получить container div, используя closest() и использовать find, чтобы получить dropdown-toggle, используя find () .

А также выиспользовали неверный метод для тега a, вам нужно использовать click вместо таких изменений

$('.dropdown-menu li a').click(function() {});

DEMO

$('.dropdown-menu li a').click(function() {
  var dropdown = $(this).closest(".container").find('.dropdown-toggle');
  dropdown.text($(this).text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container" style="height: 0;">
  <ul class="psh__dpdw ">
    <li class="button-dropdown">
      <a class="dropdown-toggle">
        <img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
      </a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
      <a href="{{helper:site_url}}prokuroria_themelore/{{category_id}}/{{url_title}}/{{category_id}}{{entry_id}}" name="alphabet">{{special}}</a> {{ /content:categories }}
      <br><br>

      <ul class="dropdown-menu">
        <li>
          <a href="#">Prishtinë</a>
        </li>
        <li>
          <a href="#">Gjilan</a>
        </li>
        <li>
          <a href="#">Prizren</a>
        </li>
        <li>
          <a href="#">Pejë</a>
        </li>
        <li>
          <a href="#">Mitrovicë</a>
        </li>
        <li>
          <a href="#">Gjakovë</a>
        </li>
        <li>
          <a href="#">Ferizaj</a>
        </li>
      </ul>

    </li>
  </ul>
</div>