Как при клике выделять элементы списка?

Question

[Человек]

Есть форма из которой можно выбрать несколько или даже все варианты
при помощи ctrl+клик или зажатым левым кликом на мыше, что неудобно.

Как при помощи js достичь того, чтобы можно было выделять варианты из
списка при помощи простого одинарного клика. А затем ранее выделенные варианты
мы могли отправить на сервак при помощи кнопки "Отправить"

<form method ="GET">   
Форма:           
          
<select class="click" name="list[]" size="4" multiple >         
                                                
<option class="x1" value="Дом">Вариант 1</option>          
<option class="x2"value="Сарай">Вариант 2</option>         
<option class="x3"value="Хижина">Вариант 3</option>
<option class="x4" value="Квартира">Вариант 4</option>
 
</select>
 
<input type="submit" value="Отправить">
</form>

let menu = document.querySelector(".click");
 
menu.addEventListener("click", function(e){
 
e.target. // что сюда нужно дописать?
 
});

Comments

[Beliyadm]

сделать checkbox вместо радио батонов не вариант? В радио много вариантов не отправишь, если только через JS собирать несколько кликов в отдельное поле, что есть полный бред

[Человек]

Beliyadm, у меня радио батон?
радион батон выглядит так же:

<form method ="GET">   

Форма:                                                                                     
<div> Переключатель-1: <input type="radio" name="switch" value="1" /> </div>   
<div> Переключатель-2: <input type="radio" name="switch" value="2" /> </div>   
<div> Переключатель-3: <input type="radio" name="switch" value="3" /> </div>    
                                                                         
<input type="submit" value="Отправить">                                     
</form>

[Человек]

Beliyadm, а при помощи php реализовать мою задумку не получится?

[Beliyadm]

Добрый Дельфин, ступилс, виноват. На пхп вы бек будете обрабатывать, тут JS нужен
К примеру такой вариант ы
https://codepen.io/gmkhussain/pen/ozwwPw или
https://codepen.io/souvik1809/pen/rvNMyO или
https://codepen.io/aaroniker/details/VGMwLd

Гуглить в сторону вариантов "select multiple javascript"

[Человек]

Beliyadm, немного порылся в инете нашел вариант с jquery:

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

Помогло, хотя я в jquery полный ноль и не понимаю, что происходит в этом коде =(
Но этот код работает, как я и хотел.
Хотелось бы на чистом js =(

Answer 1

[Виктор Майоров]

Набросал небольшой пример на чистом js:
https://codepen.io/webm0fe/pen/abjzjdK

Comments

[Человек]

Не работает =(
По задумке, когда выделяешь кликом мыши несколько вариантов,
то потом их можно отправить на сервер, но этого не происходит с js кодом + php кодом ниже =(

Теперь попробуйте вывести все это в php.
Сначала уберите свой js код:
Затем добавьте этот код php и выберите все варианты ctlr+клик и нажмите кнопку отправить.

if(!empty($_GET)){
foreach($_GET['list'] as $items){
echo $items."<br>";
}}

[Виктор Майоров]

Добрый Дельфин, так данные нежно отправлять самостоятельно, я всего лишь дал пример того, как собирать данные и сделать выбор в нативном селекте по обычному клику + выбор нескольких выделением.

за вас всю работу тут никто делать не будет)

[Человек]

Виктор Майоров, там много кода для такого простого действия.
Я нашел вариант полегче:

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

[Человек]

Виктор Майоров,
Вижу, что вы много кода написали, ладно, за старание поставлю вам ответ =)

[Человек]

Виктор Майоров, кстати, отправить данные нужно при помощи json ?

[Виктор Майоров]

Добрый Дельфин, да, в формате JSON.
Дописал не много пример, сделал отправку данных (см. со строки 11)
https://codepen.io/webm0fe/pen/abjzjdK
но если будете использовать jquery, то там есть $.ajax.
Вот пример отправки данных через jquery https://snipp.ru/jquery/ajax-jquery

[Человек]

Виктор Майоров, а как тогда этот jquery код без json:

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

Отправляет данные, если их выбрать кликом, а затем нажать кнопку отправить.

Потом эти данные выводит этот вот код php:

if(!empty($_GET)){
foreach($_GET['list'] as $items){
echo $items."<br>";
}}

[Виктор Майоров]

Добрый Дельфин, https://developer.mozilla.org/ru/docs/Learn/Forms/...

[Человек]

Виктор Майоров, эх, вы наверное не backend разраб =(

[Виктор Майоров]

Добрый Дельфин, напиши мне в телегу @webm0fe, не хочу засорять тут комментарии) я скорее всего не въезжаю, что хочешь получить на выходе ты)