Help to realize the idea, the second day I fight. You need to implement a drop-down list from the checkbox and when selected, the value should be displayed in the input, and when removed, deleted.

I implemented it like this, it seems to work, but if you put several inputs, then as a result, if you have a wedge on one, all the lists fall out, and if you drop it, then pretend the number of check values ​​for all input values

<div class="col-3" id="col1"> <div class="headVolumeGroup" id="headVolumeGroup1"> <input class="effect-1" data-parameter="1" data-id="volumeGroupsStringReturnException1" type="text" autocomplete="off" id="volumeGroupsStringReturnException1" /> <span class="focus-border"></span> <p class="multiSel" id="multiSel1" hidden></p> </div> <div class="listVolumeGroup" id="listVolumeGroup1"> <div class="mutliSelect" id="mutliSelect1"> <ul> <li> <input type="checkbox" value="120" />120</li> <li> <input type="checkbox" value="138" />138</li> <li> <input type="checkbox" value="150" />150</li> </ul> </div> </div> </div> <div class="col-3" id="col2"> <div class="headVolumeGroup" id="headVolumeGroup2"> <input class="effect-1" data-parameter="2" data-id="volumeGroupsStringReturnException2" type="text" autocomplete="off" id="volumeGroupsStringReturnException2" /> <span class="focus-border"></span> <p class="multiSel" id="multiSel2" hidden></p> </div> <div class="listVolumeGroup" id="listVolumeGroup2"> <div class="mutliSelect" id="mutliSelect2"> <ul> <li> <input type="checkbox" value="120" />120</li> <li> <input type="checkbox" value="138" />138</li> <li> <input type="checkbox" value="150" />150</li> </ul> </div> </div> </div>

and JS himself

 $(document).ready(function(){ $(".col-3 .headVolumeGroup input").on('click', function() { $(".col-3 .listVolumeGroup ul").slideToggle('fast'); }); $(document).bind("click", function(e) { var $clicked = $(e.target); if (!$clicked.parents().hasClass("col-3")) $(".col-3 .listVolumeGroup ul").hide(); }); $('.mutliSelect input[type="checkbox"]').on("click", function() { var title = $(this) .closest(".mutliSelect") .find('input[type="checkbox"]') .val(), title = $(this).val() + ","; if ($(this).is(":checked")) { var html = '<span title="' + title + '">' + title + "</span>"; $(".multiSel").append(html); var val = $(".multiSel").text(); $(".col-3 .headVolumeGroup input").val(val); } else { $('span[title="' + title + '"]').remove(); var val = $(".multiSel").text(); $(".col-3 .headVolumeGroup input").val(val); } }); });

I tried to attribute attributes with the necessary id and a certain num, then to dazzle it up, so that everyone would take their own input. But in the end, the variables could not throw values.

Like this

 $(document).ready(function(){ var element; var id; $(".col-3 .headVolumeGroup input").on('click', function() { id = this.getAttribute("data-parameter"); element = this.getAttribute("data-id"); $("#col" + id + " #listVolumeGroup" + id + " ul").slideToggle("fast"); }); $(document).bind("click", function(e) { var $clicked = $(e.target); if (!$clicked.parents().hasClass("col-3")) $("#col" + id + " #listVolumeGroup" + id + " ul").hide(); }); $('#mutliSelect' + id + ' input[type="checkbox"]').on("click", function() { var title = $(this) .closest("#mutliSelect" + id) .find('input[type="checkbox"]') .val(), title = $(this).val() + ","; if ($(this).is(":checked")) { var html = '<span title="' + title + '">' + title + "</span>"; $("#multiSel" + id).append(html); var val = $("#multiSel" + id).text(); $("#col" + id + " #headVolumeGroup" + id + " #" + element).val(val); } else { $('span[title="' + title + '"]').remove(); var val = $("#multiSel" + id).text(); console.log(element); $("#col" + id + " #headVolumeGroup" + id + " #" + element).val(val); } }); });

Naturally did not work as needed.

Help pliz yourself while in the initial stages of learning jQuery. On js I could do it, but I would like to understand how it is on jQuery.

    1 answer 1

    It's strange of course that you did it on pure js, but there is no rewrite on jQuery. Everything is a bit simpler) And for interacting with input you should not use click events, it is better to use special events such as: input, focus, blur, change.
    Here I sketched a small example, I hope I understood your idea correctly.

     $(document).on('focus', '.show-list', function() { var $input = $(this); var $checkList = $input.siblings('.check-list'), $checkBoxes = $checkList.find('.check-list__checkbox'); $checkList.show(); $checkBoxes.on('change', function() { var inputText = '', checkStatus = 0; for (var i = 0; i < $checkBoxes.length; i++) { if ($checkBoxes.eq(i).is(":checked")) { checkStatus++; if (inputText === '') { inputText = $checkBoxes.eq(i).val(); } else { inputText += ', ' + $checkBoxes.eq(i).val(); } $input.val(inputText); } else if (checkStatus === 0) { $input.val(''); } } }); }); 
     .wrapper + .wrapper { margin-top: 20px; } .check-list { display: none; } .check-list ul { list-style-type: none; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper"> <input type="text" class="show-list"> <div class="check-list"> <ul> <li> <input type="checkbox" value="120" class="check-list__checkbox" />120</li> <li> <input type="checkbox" value="138" class="check-list__checkbox" />138</li> <li> <input type="checkbox" value="150" class="check-list__checkbox" />150</li> </ul> </div> </div> <div class="wrapper"> <input type="text" class="show-list"> <div class="check-list"> <ul> <li> <input type="checkbox" value="120" class="check-list__checkbox" />120</li> <li> <input type="checkbox" value="138" class="check-list__checkbox" />138</li> <li> <input type="checkbox" value="150" class="check-list__checkbox" />150</li> </ul> </div> </div>

    • But yes, js I could do with the id transfer, and here I could not connect the id and the necessary block. I hung on the focus, but in the end I got a double trigger, that is, as a result, the value doubled with each click. Thank you very much, I will study the code and look where I was wrong :) - Vladislav
    • everything turned out to be much easier. My misfortune was that I didn’t even think that the document could be started with an event, and not with ready. Thanks again - Vladislav
    • It turned out to realize what I had in mind, I understood my mistakes, it remains to finish hiding the list by clicking on an imput or in the field, but these are trifles, the main thing was to understand how to get a separate input. - Vladislav
    • @ Vladislav $(document).ready you used correctly, these are completely different things, I just threw a handler through the document through the document. - kost1k
    • I just did not know about it, read it. Now I have finalized the script to hide the list and if some values ​​from the list have already been entered into the input, then it automatically checks them in the list. - Vladislav