Нарезка элементов из трех меню выбора в массив и из массива

ProgramBox

Нарезка элементов из трех меню выбора в массив и из массива

Post author:admin
Запись опубликована:29 мая, 2023
Post category:Вопросы по программированию

#javascript #html #arrays #select #slice

#javascript #HTML #массивы #выберите #нарезка

Вопрос:

 var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
var array = [];
let sel1 = false;

function myFunct1() { 
  var one = select1.options[select1.selectedIndex].value;
  if(array.length === 1 amp;amp; !sel1) array.unshift(one);
  else array.splice(0,1,one);
  console.log(array);
  sel1 = true;
}

function myFunct2() {
  var two = select2.options[select2.selectedIndex].value;
  array.splice(sel1, 1, two);
  console.log(array);
}

            function myFunct3() {
                var three = select3.options[select3.selectedIndex].value;
            }

 <select id = 'select1' onchange = 'myFunct1()'>
            <option disabled selected value> -- select an option -- </option>
            <option value = 'Dog1'>Dog</option>
            <option value = 'Cat1'>Cat</option>
            <option value = 'Bear1'>Bear</option>
            </select>
            
        <select id = 'select2' onchange = 'myFunct2()'>
            <option disabled selected value> -- select an option -- </option>
            <option value = 'Dog2'>Dog</option>
            <option value = 'Cat2'>Cat</option>
            <option value = 'Bear2'>Bear</option>
            </select>
                    
        <select id = 'select3' onchange = 'myFunct3()'>
            <option disabled selected value> -- select an option -- </option>
            <option value = 'Dog3'>Dog</option>
            <option value = 'Cat3'>Cat</option>
            <option value = 'Bear3'>Bear</option>
            </select>

У меня есть этот метод, который работает именно так, как я хочу, с двумя меню выбора. Таким образом, если вы выбираете два раза подряд из второго выбора, длина массива никогда не будет больше единицы, пока вы не выберете из первого. Теперь я хочу включить третье меню выбора. Пожалуйста, помогите мне сделать эту работу. Я знаю, что мог бы объединить их все в одну функцию и не иметь дела с этими проблемами, но для моего использования я не могу этого сделать. Главное условие заключается в том, что в массиве никогда не должно быть нескольких вариантов выбора из одного и того же меню выбора и никогда не должно быть пустых позиций в массиве, которые все еще учитываются в его длине. таким образом, массив [undefined, Cat2] не возникает.

Ответ №1:

Простой способ заключается в:

Создайте два массива, т.е. realArr (чтобы сохранить строки с исходными индексами). Например, значение from select1 всегда будет устанавливаться в realArr[0] , а from select2 в realArr[1] …
Второй массив showArr — это массив, из которого вы будете удалять undefined с помощью filter()

 var select1 = document.getElementById('select1');
        var select2 = document.getElementById('select2');
        var select3= document.getElementById('select3');
        var realArr = [];
        var showArr = [];
        
        function myFunct1() { 
            var one = select1.options[select1.selectedIndex].value;
            realArr[0] = one;
            showArr = realArr.filter(x => x !== undefined);
            console.log(showArr);
        }
        
        function myFunct2() {
            var two = select2.options[select2.selectedIndex].value;
            realArr[1] = two
            showArr = realArr.filter(x => x !== undefined);
            console.log(showArr);
        }


        function myFunct3() {
            var three = select3.options[select3.selectedIndex].value;
            realArr[2] = three;
            showArr = realArr.filter(x => x !== undefined);
            console.log(showArr);
        }

 <select id = 'select1' onchange = 'myFunct1()'>
        <option disabled selected value> -- select an option -- </option>
        <option value = 'Dog1'>Dog</option>
        <option value = 'Cat1'>Cat</option>
        <option value = 'Bear1'>Bear</option>
        </select>
        
    <select id = 'select2' onchange = 'myFunct2()'>
        <option disabled selected value> -- select an option -- </option>
        <option value = 'Dog2'>Dog</option>
        <option value = 'Cat2'>Cat</option>
        <option value = 'Bear2'>Bear</option>
        </select>
                
    <select id = 'select3' onchange = 'myFunct3()'>
        <option disabled selected value> -- select an option -- </option>
        <option value = 'Dog3'>Dog</option>
        <option value = 'Cat3'>Cat</option>
        <option value = 'Bear3'>Bear</option>
        </select>

1. @Harper Creek Ваш вопрос был немного сложным. Потому что, когда элемент добавляется в массив, мы не можем сказать, из какого он выбора.

2. аааа, махир, это ты. Вы придумали этот лучший способ? Это потрясающе, еще раз спасибо за помощь. Кстати, в приведенном выше коде ^^^ вы по ошибке определили select3 как select2. Я бы отредактировал это, но там сказано, что для меня редактирование должно содержать более 6 символов. 🙂

3. @Harper Creek Я это исправил.