Multiple Select2 связанные option

203
26 марта 2022, 14:40

поставили мне задачу, в которой я не разбирался никогда ранее, было бы не плохо, если бы кто-нибудь смог помочь.

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

Эти странны разделены на три группы:

Группа 1 = 20 стран, Группа 2 = 46 стран, Группа 3 = 196 стран.

К каждой группе присвоена сумма затрат.

Задачи:

1.

Группы выполнены в виде

<div class="custom-control custom-checkbox checkbox-primary"> 
<input type="checkbox" class="custom-control-input" id="Group1"> 
<label class="custom-control-label" for="Group1">Group Countries 1</label> 
</div> 
 
<div class="custom-control custom-checkbox checkbox-primary"> 
<input type="checkbox" class="custom-control-input" id="Group2"> 
<label class="custom-control-label" for="Group2">Group Countries 2</label> 
</div> 
 
<div class="custom-control custom-checkbox checkbox-primary"> 
<input type="checkbox" class="custom-control-input" id="Group3"> 
<label class="custom-control-label" for="Group3">Group Countries 3</label> 
</div>

И при выборе пользователя одной из групп стран (человек при этом может выбрать как одну группу так и все три) они должны добавляться в

     <select class="select2 select2-multiple" multiple="multiple" data-placeholder="Choose">  
     <option value="1">Страна 1</option> 
     <option value="2">Страна 2</option> 
     <option value="3">Страна 3</option> 
     <option value="n">Страна n</option> 
     </select>

2.

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

(Если человек выбрал несколько Групп стран то затраченные средства высчитываются по формуле: сумма с группы 1 + сумма с группы 2 деленное на кол-во выбранных групп +%(равный кол-ву выбранных групп))

Пример:

Группа 1 = 10 рублей

Группа 2 = 40 рублей (10 + 40)\2+2% = 25.5

3.

Ниже имеется

<input type="text" class="form-control mt-15" placeholder="Count">

Требуется чтобы человек не мог вписать сумму затраченных средств меньше чем получилась у него по формуле.

Если потребуется, имеется excel файл со списком стран, переходов и суммами потраченных средств по группам, в ЛС могу предоставить

Answer 1

Для примера собрал такую верстку:

 <div class="custom-control custom-checkbox checkbox-primary">
    <input type="checkbox" class="custom-control-input" id="Group1">
    <label class="custom-control-label" for="Group1">Group Countries 1</label>
</div>
<div class="custom-control custom-checkbox checkbox-primary">
    <input type="checkbox" class="custom-control-input" id="Group2">
    <label class="custom-control-label" for="Group2">Group Countries 2</label>
</div>
<div class="custom-control custom-checkbox checkbox-primary">
    <input type="checkbox" class="custom-control-input" id="Group3">
    <label class="custom-control-label" for="Group3">Group Countries 3</label>
</div>
<select class="select2 select2-multiple" multiple="multiple" data-placeholder="Choose"> 
</select>
<div class="selected">
</div>

<div id="transitions">
</div>
<div id="summ">
</div>

Массивы построил в таком виде:

var arr=[
            ['1','Australia','74067'], // 'группа','страна','переходы'
            ['1','Austria','59528'],
            ['1','Belgium','84858'],
            ['2','Albania','9038'],
            ['2','Belarus','13392'],
            ['2','Cyprus','7559'],
            ['3','Afganistan','8565'],
            ['3','Andorra','339'],
            ['3','Antigua and Barbuda','160']
    ], 
    money_arr=[4,3,2]; // стоимость по группам

Код для расчетов:

$(document).ready(function(){
//по клику на лейбл перезаполняем перечень options
$('.custom-control-input').click(function(){
    $('.select2').html('');
    $('.custom-control-input').each(function(){
        if($(this).prop('checked'))
            {
            var countries=[], group=$(this).siblings('label').html().replace('Group Countries ','');
            countries = arr.filter(function (e) {
                return Number(e[0])==group;
                });
            countries.forEach(function(country,i,countries){    
                $('.select2').append('<option value="'+country[1]+'" transitions="'+country[2]+'" group="'+country[0]+'">'+country[1]+'</option>')
                });
            }
        })
    });
//по клику на option переношу его в список выбраных (для примера, под свои нужды адаптируйте), затем пересчитываем значения
$('select').on('click','option',function(){
    $('.selected').append($(this));
    var props_count=0,props_arr=[],sum=0, transitions=0, resault=0;

    $('.selected').children().each(function(){
        if(props_arr.indexOf($(this).attr('group'))<0)
            {
            console.log('ss')
            props_arr.push($(this).attr('group'));
            }
        transitions+=Number($(this).attr('transitions'));
        });

    props_count=props_arr.length;
    props_arr.forEach(function(prop,i,props){
        sum+=money_arr[prop-1]; 
        });
    resault=sum/props_count+(sum/props_count/100*2);
    $('#transitions').html('Переходы: '+transitions);
    $('#summ').html('Сумма: '+resault);
    });
});

Косметику вроде очистки переменных, проверок на пустоту и т.д. не делал, это все уже зависит от вашего кода. Все равно требуется адаптация под ваши нужды, тут концепция и рабочий пример методики.

READ ALSO
Как передать данные из одного компонента в другой?

Как передать данные из одного компонента в другой?

Есть код, который выводит посты и по клику на пост показывает его полное содержимое

145
Вызвать событие &quot;Click&quot;

Вызвать событие "Click"

Я разрабатываю расширения, которые добавляют код js в сторонний сервис и автоматически заполняют форму для клиента

96
Проверка SSL сертификатов в js на django

Проверка SSL сертификатов в js на django

Доброго времени суток изучаю Django пишу форму для заказа такси с сайта мне надо из файла js делать GET и POST запросы к серверу, когда делаю запрос...

207
задача с цифрами в часах

задача с цифрами в часах

Задачу нужно решить следующим образом: нужно с помощью split разделить то что в переменной, потом отнять 45 минут(0:45)от второй части, проблема...

233