locked
Create dropdownlist like effect angularjs RRS feed

  • Question

  • User2108892867 posted

    Hello everyone, I have this requirement that I need to create a dropdownlist from a custom markup created in angular js. So here is my js fiddle:

    http://jsfiddle.net/m1gzahkr/

    Could someone tell me what I did wrong here? So when you click on select mentor, the dropdown shows up and it should not hide when you click anywhere on the dropdown content. But if you click outside of the content, it should hide the dropdown. After you select your mentors and click save, the selected mentors should show up and you could remove the mentor by clicking the cross sign next to each selected mentor. Thanks

    Wednesday, March 13, 2019 10:55 PM

All replies

  • User2108892867 posted

    Hello everyone, after some testing and here is the updated version of my jsfiddle:

    http://jsfiddle.net/3vywfh2x/1/

    So now here are a few things I would like to solve. 

    1. After clicking save, to open the dropdown again, I would need to click on the name to open the dropdown. How could I make it so that I can click any where on the blue div to open the dropdown again? 
    2. When I clicked on the cross sign to remove the mentor, the dropdown open. How could I stop that?  I want to remove that mentor without opening the dropdown.

    Thanks. 

    Thursday, March 14, 2019 2:30 AM
  • User1724605321 posted

    Hi asplearning ,

    After clicking save, to open the dropdown again, I would need to click on the name to open the dropdown. How could I make it so that I can click any where on the blue div to open the dropdown again? 

    Then append the open dropdownlist function to that area :

    $(document).click(function(e) {
      var container = $(".my-dropdown");
      $(".my-dropdown").click(openCloseDropDown);
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(".my-dropdown-content").removeClass('show');
      }
    });

    When I clicked on the cross sign to remove the mentor, the dropdown open. How could I stop that?  I want to remove that mentor without opening the dropdown.

    Not sure about the feature , but you could close the dropdown by :

     $(".my-dropdown-content").removeClass('show');

    Best Regards,

    Nan Yu

    Thursday, March 14, 2019 6:03 AM