Показать сообщение отдельно
  #1 (permalink)  
Старый 28.06.2022, 21:22
Новичок на форуме
Отправить личное сообщение для VampireFang Посмотреть профиль Найти все сообщения от VampireFang
 
Регистрация: 28.06.2022
Сообщений: 8

Как поменять последний выпадающий список на кнопку поиска?
Есть готовый рабочий код. Подскажите, пожалуйста, как изменить последний выпадающий список на кнопку "найти", а так же сделать, чтобы эту кнопку можно было нажать при выборе значения хотя бы в одном выпадающем списке.
<div class="chained-selects">
  <select class="app-select form-control">
    <option selected>Выберите марку</option>
  </select>						    
  <select class="app-select form-control" disabled>
    <option selected>Выберите модель</option>
  </select>						    
  <select class="app-select form-control"disabled>
    <option selected>Выберите кузов</option>
  </select>    										    						  
</div>

const options = generateOptions();
const chainedSelects = document.querySelector(".chained-selects");
chainedSelects.addEventListener("change", onChange, false);
draw(chainedSelects.firstChild, options);

function onChange(event) {
  const { target } = event;
  let node = target, path = [];

  while (node = node.nextElementSibling) {
    node.length = 1;
    node.disabled = true;
  }

  if (target.selectedIndex === 0) return;

  node = target;
  do path.push(node.value);
  while (node = node.previousElementSibling);

  if (target.nextElementSibling) {
    const option = path.reduceRight((option, property) => option[property], options);
    draw(target, option);
  } else {
    const option = path.slice(1).reduceRight((option, property) => option[property], options);
    const value = option[target.value];
    if (value == null) return;
    location.href = value.url || value;
  }
}

function draw(target, option) {
  for (const [property, value] of Object.entries(option))
    target.nextElementSibling.add(new Option(property, property));
  target.nextElementSibling.disabled = false;
}

function generateOptions() {
  return {
    "AUDI": {
      "80": {
        "B3": {
          url: "p1.html"
        },
        "B4": {
          url: "p2.html"
        }
      },
      "100": {
        "C3": {
          url: "p3.html"
        },
        "C4": {
          url: "p4.html"
        }
      }
    },
    "BMW": {
      "3 series": {
        "E30": {
          url: "p13.html"
        },
        "E36": {
          url: "p14.html"
        },
        "E46": {
          url: "p15.html"
        }
      },
      "5 series": {
        "E34": {
          url: "p16.html"
        },
        "E39": {
          url: "p17.html"
        },
        "E60": {
          url: "p18.html"
        }
      }
    }		
  };
}

Последний раз редактировалось VampireFang, 28.06.2022 в 21:41.
Ответить с цитированием