在这里寻求一些基本理解的编程新手。
我正在处理一个带有多个复选框/下拉选择 id 的项目。
例如
<!DOCTYPE HTML>
<html>
<div class="select">
<select id>
<option>-</option>
<option>2.00</option>
<option>2.50</option>
<option>2.75</option>
</select>
</div>
<div class="checkboxes">
options:
<br>
<input type="checkbox" name="option1" value="O1">O1
<br>
<input type="checkbox" name="option2" value="O2">O2
<br>
<input type="checkbox" name="option2" value="O3">O3
<br>
</div>
</html>
大约有五六个顺序。我想要做的(并且不知道如何去做)是让这五个选择是连续的(意味着有一个“开始”按钮,然后你被问到第一个问题,点击下一个,问第二个,点击下一个等等。倒数第二个按钮是“复习”,它显示你对每个问题的回答,复习中有一个“提交”按钮,它会做一个齿轮“提交......”然后最后提交)。
我知道如何布置每个不同的选择 ID(上面的几个示例),但我不知道如何“使用”该数据、存储它、按顺序请求它以及在结束。
我知道这有点让人头疼,但是有没有人可以在这里为我提供任何方向?
非常感谢!
最佳答案
虽然这是一个相当宽泛的问题(对于 Stack Overflow 来说可能太宽泛了),但您实际上并不需要任何复杂的东西。
您需要做的就是将数据划分为逻辑部分,根据需要隐藏和显示这些部分,并将所有内容包装在一个表单元素中。
我用一些简单的示例代码展示了下面的基本思想:
var options = $('.option');
//On page load, hide all options and then show the first one
options.hide().eq(0).show();
$('.move').on('click', function() {
//Which move button did we click?
//This allows us to avoid repeating the rest of the below logic in two separate event handlers
var button = this.getAttribute("id");
//Which way do we want to move?
var direction = +1;
if (button.localeCompare("prev") === 0) {
direction = -1;
}
//Hide the option we're currently viewing
var currentOption = $('.option:visible');
currentOption.hide();
//Figure out which option to show next
var currentIndex = (options.index(currentOption));
//Make sure that the index is limited to reasonable values (so we don't try to show options that don't exist)
var index = Math.min(currentIndex + direction, options.length - 1);
index = Math.max(index, 0);
options.eq(index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="prev" class="move" type="button" value="Prev option" />
<input id="next" class="move" type="button" value="Next option" />
<form>
<div class="option">
<p>Description 1</p>
<select>
<option>-</option>
<option>2.00</option>
<option>2.50</option>
<option>2.75</option>
</select>
</div>
<div class="option">
<p>Description 2</p>
<select>
<option>-</option>
<option>5.00</option>
<option>10.00</option>
<option>20.00</option>
</select>
</div>
<div class="option">
<p>Description 3</p>
<select>
<option>-</option>
<option>50.00</option>
<option>100.00</option>
<option>200.00</option>
</select>
</div>
<p>
<button>Submit</button>(This submits all the options)
</p>
</form>
关于javascript - 如何将信息输入到一系列表格中并显示该信息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27809770/