Таблица с пошаговым заполнением
У меня есть вот такой код, который позволяет мне поочередно делать ячейки таблицы видимыми:
<?php
$column_one = [
"1" => "Максим",
"2" => "Василий",
"3" => "Евгений",
"4" => "Владимир",
];
$column_two = [
"1" => "Евтушенко",
"2" => "Петров",
"3" => "Долгополов",
"4" => "Неуструев",
];
$column_three = [
"1" => "какое-то значени",
"2" => "другое значение",
"3" => "третий вариант",
"4" => "четвертый вариант",
];
$step = 0;
echo "<table class=\"style1\">";
if ($step == 0) {
echo "<tr>";
echo "<td>1 столбик</td>";
echo "<td>2 столбик</td>";
echo "<td>3 столбик</td>";
echo "</tr>";
}
if ($step == 0) {
echo "<tr>";
echo "<td><select name=\"one\">";
foreach ($column_one as $key => $value) {
echo "<form method=\"POST\"><option>$value</option></form>";
}
echo "</select></td>";
if (isset(POST[one])) {
$step ++;
}
}
if ($step == 1) {
echo "<td><select name=\"two\">";
foreach ($column_two as $key => $value) {
echo "<option>$value</option>";
}
echo "</td></select>";
}
if ($step == 2) {
echo "<td><select name=\"three\">";
foreach ($column_three as $key => $value) {
echo "<option>$value</option>";
}
echo "</td></select>";
}
echo "</tr>";
echo "</table>";
?>
Я добавил вот такой код в файл JS чтобы убирать атрибут hidden, можно ли как-то сделать так чтобы не было вот таких дублирований кусков кода? например если бы у всех select был один id или еще какие-то варианты?
document.getElementById("one").selectedIndex = -1;
document.getElementById("two").selectedIndex = -1;
document.getElementById("three").selectedIndex = -1;
var sel = document.getElementById("one");
var value = sel.value;
var text = sel.options[sel.selectedIndex].text;
function functionName() {
if (text != '') {
var sel2 = document.getElementById("two");
sel2.removeAttribute("hidden");
}
}
var sel_two = document.getElementById("two");
var value_two = sel_two.value;
var text_two = sel_two.options[sel_two.selectedIndex].text;
function HiddenTwo() {
if (text_two != '') {
var sel3 = document.getElementById("three");
sel3.removeAttribute("hidden");
}
}