How to get div id and set it to anoher func

Question

Have a func that get clicked div id need to give next func this id instead "#dropdown1"

    $(function() {



   $('.drop-down-input').click(function() {

        $elementid = this.id;
        $elementid= "#" + elementid;
     });
      console.log($elementid);
     $("#dropdown1").click(function() {

        $("#dropdown1 .dropdown-list").show();

     }); 

  $("#dropdown1 .dropdown-list li").on('click', function(e) {
    e.stopPropagation();
    $("#dropdown1 .dropdown-list").hide().siblings().val($(this).html());
  });
});

HTML:

<div id="dropdown1" class="styled-input-container drop-down-input">
                   <input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
                   <ul class="dropdown-list">
                       <li>eeee</li>
                       <li>xxxx</li>
                       <li>xxxx</li>
                       <li>xsssxxx</li>
                   </ul>
               </div>

Idea is that I can use this code again in another place. for examle use 2 dropdowns with different ID

What do you want to achieve? This seems like a bad way of doing it. — Mihailo, Nov 24 '16 at 16:34
Uncaught ReferenceError: elementid is not defined(…) after clicking nothing happens — Егор Кротенко, Nov 24 '16 at 16:35
Add a class to the element, and then the other function can use that class in a selector. — Barmar, Nov 24 '16 at 16:35
@ЕгорКротенко It's `$elementid`, not `elementid`. — Barmar, Nov 24 '16 at 16:36

Barmar · Accepted Answer · 2016-11-24T17:00:42.447

0

Don't send the ID, add a class to the element.

$('.drop-down-input').click(function() {
    $('.drop-down-input.selected').removeClass('selected'); // Forget the previous selection
    $(this).addClass('selected');
    $(this).find(".dropdown-list").show();
});

Then in the next function you can use a selector to find the clicked element:

$(document).on("click", ".drop-down-input.selected li"), function(e) {
    e.stopPropagation();
    $('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html());
});

A benefit of this method over saving the ID in a variable is that you can use CSS to add a style to the selected element.

Full code:

$('.drop-down-input').click(function() {
  $('.drop-down-input.selected').removeClass('selected'); // Forget the previous selection
  $(this).addClass('selected');
  $(this).find(".dropdown-list").show();
});

$(document).on("click", ".drop-down-input.selected li",
  function(e) {
    e.stopPropagation();
    $('.drop-down-input.selected .dropdown-list').hide().siblings().val($(this).html());
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown1" class="styled-input-container drop-down-input">
  <input id="simple_2" class="drop-down-select" placeholder="input text" type="text">
  <ul class="dropdown-list">
    <li>eeee</li>
    <li>xxxx</li>
    <li>xxxx</li>
    <li>xsssxxx</li>
  </ul>
</div>

edited Nov 24 '16 at 17:00

answered Nov 24 '16 at 16:39

Barmar

741,623
53
500
612

The idea that I want to use dropdown 2,3 times. Want to separate it by div id – Егор Кротенко Nov 24 '16 at 16:43
Why doesn't this work for that? Selecting the element by class is just as good as using a variable to hold the ID. – Barmar Nov 24 '16 at 16:44
$("#dropdown1") - need remove that, I want that id will get from clicked element – Егор Кротенко Nov 24 '16 at 16:47
Now I understand. You can use event delegation to bind a handler to the selected input. – Barmar Nov 24 '16 at 16:50
works for opening, but now ul list doesnt close – Егор Кротенко Nov 24 '16 at 16:51
That wasn't in the question when I wrote my answer, I'll update – Barmar Nov 24 '16 at 16:52
Can you update my code, I paste yours, but nothing works. Can you make full script please? – Егор Кротенко Nov 24 '16 at 16:56
some error in your code, please run it – Егор Кротенко Nov 24 '16 at 16:59
I had an extra parentheses. It works now, try it. – Barmar Nov 24 '16 at 17:00

How to get div id and set it to anoher func

1 Answers1