如何以编程方式单击下拉列表中的li

How to click the li in the dropdown programmatically

本文关键字：下拉列表 li 单击 方式 编程      更新时间：2023-09-26

我有一个自定义下拉列表，单击下拉列表中的项目，我将更改顶部选择文本。但是，当用户进入下一步并返回当前步骤时，我正在尝试存储在本地存储中，并在本地存储使用该id。。我想以编程方式单击li。click()函数怎么会不起作用。

<div class="btn-group custom-drop" style="display:inline-block;">
    <button type="button" class="btn btn-default dropdown-toggle drop-width" data-toggle="dropdown"><div class="dropdownValue" style="color: rgba(51, 51, 51, 0.56);">Choose An Occasion </div><span class="caret"></span></button>
    <ul class="dropdown-menu scrollable-menu" role="menu">
        <li class="bla" id="1"><a icon="birthdayIcon" href="#">Birthday</a></li>
        <li class="bla" id="2"><a icon="weddingIcon" href="#">Wedding</a></li>
        <li class='bla' id="3"><a icon="anniversaryIcon" href="#">Anniversary</a></li>
        <li class='bla' id="4"><a icon="farewellIcon" href="#">Farewell</a></li>
        <li class='bla' id="5"><a icon="thanksGivingIcon" href="#">Thanks giving</a></li>
        <li class='bla' id="6"><a icon="graduationIcon" href="#">Graduation Day</a></li>
        <li class='bla' id="7"><a icon="newYearIcon" href="#">New Year’s Day – January 1</a></li>
        <li class='bla' id="8"><a icon="valentineIcon" href="#">Valentine’s Day – February 14</a></li>
        <li class='bla' id="9"><a icon="womenIcon" href="#">International Women’s Day – March 8</a></li>
        <li class='bla' id="10"><a icon="easterIcon" href="#">Easter – March 27</a></li>
        <li class='bla' id="11"><a icon="motherIcon" href="#">Mother’s Day – May 8</a></li>
        <li class='bla' id="12"><a icon="fatherIcon" href="#">Father’s Day - June 19</a></li>
        <li class='bla' id="13"><a icon="doctorIcon" href="#">Doctor’s Day – July 1</a></li>
        <li class='bla' id="14"><a icon="parentIcon" href="#">Parent’s Day – July 24</a></li>
        <li class='bla' id="15"><a icon="friendIcon" href="#">Friendship Day – August 7</a></li>
        <li class='bla' id="16"><a icon="sdIcon" href="#">Son and Daughter Day – August 11</a></li>
        <li class='bla' id="17"><a icon="teacherIcon" href="#">Teachers Day – September 5</a></li>
        <li class='bla' id="18"><a icon="dussehraIcon" href="#">Dussehra – October 11</a></li>
        <li class='bla' id="19"><a icon="bossIcon" href="#">Boss’s Day – October 17</a></li>
        <li class='bla' id="20"><a icon="diwaliIcon" href="#">Diwali  - October 30</a></li>
        <li class='bla' id="21"><a icon="halloweenIcon" href="#">Halloween – October 31</a></li>
        <li class='bla' id="22"><a icon="childrenIcon" href="#">Children’s Day – November 14</a></li>
        <li class='bla' id="23"><a icon="christmasIcon" href="#">Christmas – December 25</a></li>
        <li class='bla' id="24"><a icon="shijokesIcon" href="#">Just get a Shijokes</a></li>
    </ul>
</div>

这是JS我有

$(document).ready(function(){
    //persistence for the choose ocdasion
    if(localStorage.getItem('occasion_id')! == 'null'){
        var id_previousclick = localStorage.getItem('occasion_id');
        console.log(id_previousclick);
        $('#'+id_previousclick).click();
    }
    $('.dropdown-menu li').click(function(event){
            $('.dropdownValue').text(event.srcElement.text);
            var iconHolder = $('.iconHolder').removeClass();
            iconHolder.addClass('iconHolder '+ $(event.srcElement).attr('icon'));
            //sending the dropdown id 
            var send_occ = event.srcElement.parentElement.id;
            console.log(send_occ);
            $('.send-occ').val(send_occ);
            localStorage.setItem("occasion_id",parseInt(send_occ));
      });
});

我看过的观察结果

$('#2').click()不起作用，这意味着点击不适用于李。

面临的问题

如果我目前在JS中有条件，不让点击的项目显示在下拉列表的顶部。删除if条件将使下拉列表可单击，并且顶部元素正在更改。

好的，这些是我到目前为止注意到的错误。

  1. 这里有一个打字错误if(localStorage.getItem('occasion_id')! == 'null')。将其固定到!==
  2. event.srcElement未定义。我相信你想做$(this)。因此，获得点击的li的文本将是$(this).text()
  3. 与第二个相同，li没有icon attribute。它的"子项"是a。所以应该是$(this).find('a').attr('icon')
  4. 与第二个相同，event.srcElement.parentElement.id至this.parentElement.id。我相信您想选择li的父级。但在这种情况下，它将始终返回null，除非您定义容器ul的id
  5. 然后您可以愉快地拨打$('#2').click()或使用trigger

但是，我还没有注意到.iconHolder是什么。所以，当你把类分配给iconHolder时，它在这个答案中是不起作用的。

最后，这就是它应该看起来像的样子

$(function() {
  if (localStorage.getItem('occasion_id') !== 'null') {
    var id_previousclick = localStorage.getItem('occasion_id');
    console.log(id_previousclick);
    $('#' + id_previousclick).click();
  }
  $('.dropdown-menu li').click(function(event) {
    $('.dropdownValue').text($(this).text());
    var iconHolder = $('.iconHolder').removeClass();
    iconHolder.addClass('iconHolder ' + $(this).find('a').attr('icon'));
    //sending the dropdown id 
    var send_occ = this.parentElement.id;
    console.log(send_occ);
    $('.send-occ').val(send_occ);
    localStorage.setItem("occasion_id", parseInt(send_occ));
  });
  $("#2").click();
})

小提琴

在附加事件处理程序之前单击li元素，首先附加事件处理，然后触发单击。我临时运行了代码，出现了一些错误，但点击处理程序正在运行。

$(document).ready(function() {
  $('.dropdown-menu li').click(function(event) {
    $('.dropdownValue').text(event.srcElement.text);
    var iconHolder = $('.iconHolder').removeClass();
    iconHolder.addClass('iconHolder ' + $(event.srcElement).attr('icon'));
    //sending the dropdown id 
    var send_occ = event.srcElement.parentElement.id;
    console.log(send_occ);
    $('.send-occ').val(send_occ);
    localStorage.setItem("occasion_id", parseInt(send_occ));
  });
  //persistence for the choose ocdasion
  if (localStorage.getItem('occasion_id') ! == 'null') {
    var id_previousclick = localStorage.getItem('occasion_id');
    console.log(id_previousclick);
    $('#' + id_previousclick).click();
  }

});

试试这个函数：

function changeEv(el) {
 $('.dropdownValue').text(el.text());
            var iconHolder = $('.iconHolder').removeClass();
            iconHolder.addClass('iconHolder '+ el.find('a').attr('icon'));
}
    //persistence for the choose ocdasion
    if(localStorage.getItem('occasion_id') != 'null'){
        var id_previousclick = localStorage.getItem('occasion_id');
        console.log(id_previousclick);
        changeEv($('#'+id_previousclick))
    }
    $('.dropdown-menu li').click(function(event){
           changeEv($(this))
            //sending the dropdown id 
            var send_occ =  $(this).attr('id');
            console.log(send_occ);
            $('.send-occ').val(send_occ);
            localStorage.setItem("occasion_id",parseInt(send_occ));
      });

https://jsfiddle.net/67efmfun/1/

试试这个脚本。

<script>
    $(document).on("click",".bla" , function () {
        alert($(this).attr('id'));
        // OR
        // Your next code here
    });
</script>

这也将工作

$(document).on("click",".dropdown-menu li" , function () {
    alert($(this).attr('id'));
});
相关文章：