Я пытаюсь создать онлайн-тест личности для клиента. У меня возникают проблемы с элементами формы, обновленными таблицей так, как мне бы хотелось. На странице есть восемь разных цветовых квадратов с элементом формы выбора под каждым квадратом и значениями параметра между 1 и 25. Когда пользователь выбирает значение (наиболее предпочтительным является 25, а 1 - наименее для этого цвета), есть таблица ниже цветов с две строки из 25 квадратов, которые я хотел бы обновить на основе выбора. Например, для первого селектора цвет является темно-зеленым, если пользователь должен был выбрать номер 22, я хотел бы, чтобы ячейка под ячейкой, помеченной 22, стала темно-зеленой. Кроме того, пользователь должен иметь возможность выбирать только определенное значение только один раз, поскольку одному и тому же номеру не может быть назначено несколько цветов. Любая помощь приветствуется.изменение содержимого html на основе ввода формы
<img value="4" src="sft/images/color4.jpg" draggable="true" ondragstart="drag(event)">
<img value="2" src="sft/images/color2.jpg" draggable="true" ondragstart="drag(event)">
<img value="3" src="sft/images/color3.jpg" draggable="true" ondragstart="drag(event)">
<img value="1" src="sft/images/color1.jpg" draggable="true" ondragstart="drag(event)">
<form name="colorselect" action="#">
<select name="color4" style="width:150px; margin-bottom: 10px; background-color: #0f6700; color: #ffffff">
<option value=""> </option>
<?php
$option = '1';
while ($option <= '25'){
echo '<option value=/"'.$option.'">'.$option.'</option>';
$option ++;
}
?>
</select>
<select name="color2" style="width:150px;margin-bottom: 10px; background-color: #701b55; color: #ffffff">
<option value=""> </option>
<?php
$option = '1';
while ($option <= '25'){
echo '<option value=/"'.$option.'">'.$option.'</option>';
$option ++;
}
?>
</select>
<select name="color3" style="width:150px;margin-bottom: 10px; background-color: #ee8400; color: #ffffff">
<option value=""> </option>
<?php
$option = '1';
while ($option <= '25'){
echo '<option value=/"'.$option.'">'.$option.'</option>';
$option ++;
}
?>
</select>
<select name="color1" style="width:150px;margin-bottom: 10px; background-color: #00243c; color: #ffffff">
<option value=""> </option>
<?php
$option = '1';
while ($option <= '25'){
echo '<option value=/"'.$option.'">'.$option.'</option>';
$option ++;
}
?>
</select>
<img value="6" src="sft/images/color6.jpg" draggable="true" ondragstart="drag(event)">
<img value="5" src="sft/images/color5.jpg" draggable="true" ondragstart="drag(event)">
<img value="7" src="sft/images/color7.jpg" draggable="true" ondragstart="drag(event)">
<img value="8" src="sft/images/color8.jpg" draggable="true" ondragstart="drag(event)">
<select name="color6" style="width:150px;margin-bottom: 10px; background-color: #74bf12; color: #ffffff">
<option value=""> </option>
<?php
$option = '1';
while ($option <= '25'){
echo '<option value=/"'.$option.'">'.$option.'</option>';
$option ++;
}
?>
</select>
<select name="color5" style="width:150px;margin-bottom: 10px; background-color: #b00917; color: #ffffff">
<option value=""> </option>
<?php
$option = '1';
while ($option <= '25'){
echo '<option value=/"'.$option.'">'.$option.'</option>';
$option ++;
}
?>
</select>
<select name="color7" style="width:150px;margin-bottom: 10px; background-color: #000000; color: #ffffff">
<option value=""> </option>
<?php
$option = '1';
while ($option <= '25'){
echo '<option value=/"'.$option.'">'.$option.'</option>';
$option ++;
}
?>
</select>
<select name="color8" style="width:150px;margin-bottom: 10px; background-color: #FFFFFF">
<option value=""> </option>
<?php
$option = '1';
while ($option <= '25'){
echo '<option value=/"'.$option.'">'.$option.'</option>';
$option ++;
}
?>
</select>
</form>
<table id="sftTable">
<tr>
<td colspan="5" style="border-top:none;border-right:none;border-left:none">Strong Like</td>
<td colspan="5" style="border-top:none;border-right:none;border-left:none">Like</td>
<td colspan="5" style="border-top:none;border-right:none;border-left:none">Nuetral</td>
<td colspan="5" style="border-top:none;border-right:none;border-left:none">Dislike</td>
<td colspan="5" style="border-top:none;border-right:none;border-left:none">Strong Dislike</td>
</tr>
<tr>
<?php $count = '25';
while ($count >= '1') {
echo '<td width=/"30px/">'.$count.'</td>';
$count --;
}
?>
</tr>
<tr height="30px">
<?php $count = '25';
while ($count >= '1') {
echo '<td width=/"30px/" id=/"'.$count.'"> </td>';
$count --;
}
?>
</tr>
</table>
удивительным! Спасибо за помощь! – keycrew
saravanan mp, еще раз спасибо за ответ. Это именно то, что я искал. В ходе дальнейшего тестирования я обнаружил новую проблему, о которой я не думал, если пользователь выбирает и выбирает, а затем меняет свое мнение, исходный выбор остается выбранным цветом, а также новым. Есть ли у вас предложение о том, чтобы сделать оригинальный выбор понятным? – keycrew
@keycrew вы можете объяснить четко. Я не понимаю, чего вы хотите. Также примите ответ. –