javascript - 如何使用 ul 选择下拉列表的值

Question

这是我的代码，它没有选择下拉列表的值。

我尝试了许多不同的方法但没有工作

<div class="container" style="height: 0;">
    <ul class="psh__dpdw ">
        <li class="button-dropdown">
            <a class="dropdown-toggle">
                 something <!-- 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}}something/{{category_id}}/{{url_title}}/{{category_id}}{{entry_id}}" name="alphabet">{{special}}</a> {{ /content:categories }}


            <!--<ul class="dropdown-menu">
                <li>
                  <a href="prosecutor-pr.html">Soemthing</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代码，有什么建议吗？

我该如何解决这个问题？

标签： javascriptjqueryhtmldomdrop-down-menu

Answer 1

首先，您需要container使用 divclosest()并使用 find 来dropdown-toggle使用 find()。

而且您使用了错误的a标记方法，您需要使用click而不是像这样更改

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

演示

$('.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>