It is necessary instead of the usual text field to make a drop-down list with checkboxes. Something like this:

enter image description here

In this case, in the original form, the values ​​fit in like this:

<input name="name" value="val1, val3" type="text">

That is, separated by a comma, and if I also noted the first paragraph, it would be fine. So that, for example, marking the 3rd value as the first one, it appeared at the top of the list, and the others in order.

Already riveted script:

 $(document).ready(function() { // ДобавляСм значСния var val_data = { "val1": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 1", "val2": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 2", "val3": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 3", "val4": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 4", "val5": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 5" }; var input = $('[name="other1"]'); // Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΎΠ±Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ с классом var val_cont = document.createElement('div'); $(val_cont).addClass("dropdown"); // Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ открытия списка ΠΈ ΠΏΠΎΠ»Π΅ для записи Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ $(val_cont).append("<a href='javascript:void(0);'><span class='open'>Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅</span><span class='value'></span></a>"); // Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π²Ρ‹ΠΏΠ΄Π°ΡŽΡ‰ΠΈΠΉ список ΠΈ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅ΠΌ Π² ΠΎΠ±Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ var ul = document.createElement('ul'); for (elem in val_data) { $(ul).append("<li><input type='checkbox' value='" + elem + "' id='" + elem + "'><label for='" + elem + "'>" + val_data[elem] + "</label></li>"); } $(ul).appendTo(val_cont); $(ul).hide(); // Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΎΠ±Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ послС Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ input-Π° $(input).after(val_cont); // Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ/ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список $(".dropdown a").on('click', function() { $(".dropdown ul").slideToggle('fast'); }); $('.dropdown ul input[type="checkbox"]').on('click', function() { var title_val = $(this).closest('.dropdown ul').find('input[type="checkbox"]').val(), title = $(this).val() + ", "; if ($(this).is(':checked')) { var html = '<span data-atr="' + title + '">' + title + '</span>'; $('.value').append(html); $(".open").hide(); } else { $('span[data-atr="' + title + '"]').remove(); } if ($('.value').text() == "") { $(".open").show(); $(input).val(""); } else { $(input).val($('.value').text()); } }); }); 
 * { box-sizing: border-box; } body, ul { margin: 0; padding: 0; font-family: Arial; } input[type="text"] { display: none; } .dropdown { position: relative; display: table; margin: 10px auto; color: #333; min-width: 220px; } .dropdown a { display: block; text-decoration: none; color: #fff; background: #333; padding: 12px 20px 10px; border-radius: 20px; text-transform: uppercase; font-size: .95em; text-align: center; } .dropdown ul { position: relative; list-style: none; background: #eee; margin-top: 10px; padding: 5px 0; border-radius: 20px; font-size: .9em; } .dropdown ul:before { content: ''; position: absolute; right: 20px; bottom: 100%; width: 0; height: 0; border-style: solid; border-width: 0 7px 6px 7px; border-color: transparent transparent #eeeeee transparent; } .dropdown ul li { padding: 10px 14px; border-bottom: 1px solid #e0e0e0; } .dropdown ul li:last-child { border: none; } .dropdown input[type="checkbox"] { display: none; } .dropdown label { display: block; position: relative; padding-left: 22px; cursor: pointer; } .dropdown label:before { content: ''; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border: 2px solid #666; border-radius: 4px; } .dropdown input[type="checkbox"]:checked ~ label:before { background: #666; } .dropdown label:after { content: ''; position: absolute; display: block; width: 5px; height: 12px; top: -5px; left: 6px; border: 2px solid #fff; box-shadow: 1px 2px 2px #555; border-top-color: transparent; border-left-color: transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); z-index: 2; opacity: 0; visibility: hidden; } .dropdown input[type="checkbox"]:checked ~ label:after { opacity: 1; visibility: visible; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="other1" value="val2, val5" type="text">

So. As we see from the example, everything works. However, it is necessary to check the script code itself, I am sure that it has jambs or can be shortened. The most important thing that can’t be dealt with in any way is, in general, this is the question: How to check the contents of the input and, if the values ​​match, mark the necessary items in the drop-down list?

    2 answers 2

    Comments inside the code. Values ​​must be entered separated by a comma with a space (as in the original example).

     $(document).ready(function() { // ДобавляСм значСния var val_data = { "val1": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 1", "val2": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 2", "val3": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 3", "val4": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 4", "val5": "Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 5" }; var input = $('[name="other1"]'); // Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΎΠ±Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ с классом var val_cont = document.createElement('div'); $(val_cont).addClass("dropdown"); // Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ открытия списка ΠΈ ΠΏΠΎΠ»Π΅ для записи Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ $(val_cont).append("<a href='javascript:void(0);'><span class='open'>Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅</span><span class='value'></span></a>"); // Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π²Ρ‹ΠΏΠ΄Π°ΡŽΡ‰ΠΈΠΉ список ΠΈ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅ΠΌ Π² ΠΎΠ±Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ var ul = document.createElement('ul'); for (elem in val_data) { $(ul).append("<li><input type='checkbox' value='" + elem + "' id='" + elem + "'><label for='" + elem + "'>" + val_data[elem] + "</label></li>"); } $(ul).appendTo(val_cont); $(ul).hide(); // Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΎΠ±Ρ‰ΠΈΠΉ Π±Π»ΠΎΠΊ послС Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ input-Π° $(input).after(val_cont); // Π‘ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ/ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список $(".dropdown a").on('click', function() { $(".dropdown ul").slideToggle('fast'); }); $('.dropdown ul input[type="checkbox"]').on('click', function() { var inputValue, innerObj = {}; /* провСряСм value тСкстового ΠΈΠ½ΠΏΡƒΡ‚Π°. это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для очистки ΠΎΡ‚ Π»ΠΈΡˆΠ½ΠΈΡ… запятых ΠΏΡ€ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠΈ всСх элСмСнтов ΠΈ накликивания чСкбоксов Π·Π°Π½ΠΎΠ²ΠΎ. Ссли эту ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ Π½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‚ΠΎ пустой ΠΈΠ½ΠΏΡƒΡ‚ добавляСтся ΠΊΠ°ΠΊ пустой элСмСнт массива */ if(input.val()) { /* Ссли ΠΈΠ½ΠΏΡƒΡ‚ Π½Π΅ пустой, Ρ‚ΠΎ Π·Π°ΠΊΠΈΠ΄Ρ‹Π²Π°Π΅ΠΌ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· Π½Π΅Π³ΠΎ Π² массив ΠΏΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŽ ", " */ inputValue = input.val().split(', ') } else { inputValue = []; // Ссли пустой - присваиваСм ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ пустой массив }; /* ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π½Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ для составлСния массива Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ элСмСнтами */ inputValue.forEach(function(item) { innerObj[item] = true; }); /* Ссли чСкбокс Π°ΠΊΡ‚ΠΈΠ²Π΅Π½ β€” добавляСм Π΅Π³ΠΎ value ΠΊΠ°ΠΊ ΠΊΠ»ΡŽΡ‡ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ, Π° Ссли Π½Π΅Ρ‚ β€” удаляСм этот ΠΊΠ»ΡŽΡ‡ */ if ($(this).is(':checked')) { innerObj[$(this).val()] = true; } else { delete innerObj[$(this).val()]; } inputValue = Object.keys(innerObj); // ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅ΠΌ ΠΊΠ»ΡŽΡ‡ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π² массив input.val(inputValue.join(', ')); // ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅ΠΌ массив Π² строку, раздСляя элСмСнты ", " ΠΈ записываСм Π² value ΠΈΠ½ΠΏΡƒΡ‚Π° /*var title_val = $(this).closest('.dropdown ul').find('input[type="checkbox"]').val(), title = $(this).val() + ", "; if ($(this).is(':checked')) { var html = '<span data-atr="' + title + '">' + title + '</span>'; $('.value').append(html); $(".open").hide(); } else { $('span[data-atr="' + title + '"]').remove(); } if ($('.value').text() == "") { $(".open").show(); $(input).val(""); } else { $(input).val($('.value').text()); }*/ }); // новая функция $('.check').click(function() { var valuesArray = input.val().split(', '), // собираСм Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· ΠΈΠ½ΠΏΡƒΡ‚Π° Π² массив, Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ ", " $checkboxes = $(ul).find('li input').removeClass('protected'); // удаляСм со всСх ΠΈΠ½ΠΏΡƒΡ‚ΠΎΠ² класс $.each(valuesArray, function(index, value) { // проходимся Ρ†ΠΈΠΊΠ»ΠΎΠΌ ΠΏΠΎ собранному массиву ΠΈΠ· ΠΈΠ½ΠΏΡƒΡ‚ΠΎΠ² $checkboxes.each(function() { // для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ запускаСм Ρ†ΠΈΠΊΠ» ΠΏΠΎ всСм чСкбоксам if ($(this).val() === value) { // ΠΈ Ссли value ΠΈΠ½ΠΏΡƒΡ‚Π° Ρ€Π°Π²Π½ΠΎ элСмСнту ΠΈΠ· собранного массива $(this).prop('checked', true).addClass('protected'); // "Ρ‡Π΅ΠΊΠ°Π΅ΠΌ" чСкбокс ΠΈ добавляСм Π΅ΠΌΡƒ класс, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ условии чСкбокс Π½Π΅ стал ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ Π½Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ return true; // ΡƒΡ…ΠΎΠ΄ΠΈΠΌ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΈΡ‚Π΅Ρ€Π°Ρ†ΠΈΡŽ } else if ( !$(this).hasClass('protected') ) { // Ссли Ρƒ чСкбокса Π½Π΅Ρ‚ класса protected $(this).prop('checked', false); // Ρ‚ΠΎ снимаСм Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ с чСкбокса } }); }); }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type=button class=check>check values</button><br> <input name="other1" value="val2, val5" type="text">

    • Thank. And what about cleaning the input when choosing any value? After clicking on "Check values", we see that two checkboxes are highlighted, however, clicking on one of them or selecting another value clears the input and you must manually remove the selected checkboxes and add everything again. Also, pressing the button does not change the "Select value". This block will be visible and I would like the values ​​to be visible. - Alexander Goroshev
    • I understand correctly that you want a double connection of input data and checkboxes? Namely, to the current functionality to add the update of the entered data in the input after clicking on the checkboxes? - Sasha Omelchenko
    • See it. The essence of this. There is a form of editing material. When adding material there is a finished part, described by me. That is, the drop-down list. The person chose the necessary values ​​in the necessary order by checkboxes. Saved material. Next, it opens editing. In fact, the values ​​will be entered in the input. But, the input will be hidden and the person will see only the inscription "Select values". Although they are in the input entered. It is necessary that after opening the edit, the values ​​from the input are transferred to the .value (this is not difficult), as well as noted in the checkboxes. You have already done it. - Alexander Goroshev
    • But, when adding a value, the form should not be updated. If va1, val3 is set, then when you click on the 5th item, it should just add val5, and not clear all values. I will now add a design style for the whole structure, maybe it will be clearer how the whole thing will look like. - Alexander Goroshev
    • Added to the sample styles. Here is a screen for understanding the problem. - Alexander Goroshev

    Try Chosen , this plugin really helped me out at one time, although I then wanted to solve another problem, but yours, too, he must solve)))