用javascript填充select，从select前面减去一个值

Question

我有一个带有两个输入的表单，用户必须从两个不同的集合中选择一个数字。第一个是从1到100。第二个是从1到500，但我只需要显示第一个输入中选择的数字以上的剩余值。假设我有一个这样的脚本：

<?php
echo "<form action='process.php' method='post'>";
echo "<select id='first_set' name='first_set'>";
echo "<option value='' disabled selected hidden>select how many</option>";
for ($i = 1; $i <= 100; $i ++) {
echo "<option value='" . $i . "'>" . $i . "</option>";
}
echo "</select>";
echo "<select id='second_set' name='second_set'>";
?>
<script type="text/javascript">
$(document).ready(function(){
$('#first_set').on('change',function(){
var numFirstSet = $(this).val();
if(numFirstSet){
var topSecondSet = 500;
var numRemaining = topSecondSet - numFirstSet;
for (var a = numRemaining; a < topSecondSet; a ++) {
var numToDisplay = a;
$('#second_set').html('<option value="numToDisplay">numToDisplay</option>');
}
}else{
$('#second_set').html('<option value="">Select first a value from the set before!</option>');
}
});
});
</script>
<?php
// the submit button
echo "</form>";
?>

但它不起作用。不幸的是，second_set select显示的是单词"numToDisplay"，而不是计算值(var numToDisplay(或文本"select first a value from The set before！"。

编辑：在一些建议之后，我尝试了

$('#second_set').html('<option value="' + numToDisplay + '">' + numToDisplay + '</option>');

但得到了一个奇怪的结果：在firstronget中完成选择后，会显示numToDisplay值，但它总是499。这是第一个SecondSet-1！没有一套价值观。

我试图找到一个解决方案，并编写了以下代码：

<script type="text/javascript">
$(document).ready(function(){
$('#first_set').on('change',function(){
var sel_box = document.getElementById("second_set");
var numFirstSet = $(this).val();
sel_box.selectedIndex = 0;
if(numFirstSet){
var topSecondSet = 100;
var startNum = numFirstSet + 1;
for (var a = startNum; a <= topSecondSet; a ++) {
var numToDisplay = a;
var option = document.createElement("option");
option.text = numToDisplay;
sel_box.add(option); 
}
}else{
var selectfirstText = "Select first a value from the set before!";
sel_box.html = '<option value="">' + selectfirstText + '</option>';
}
});
});
</script>

现在second_set是在firstronget更改后填充的，但出现了两个问题：

1(second_set中的项从numFirstSet*10开始，而不是从numFirstSet+1开始

2(每次在firstronget选择中进行更改时，都会添加一组新的选项，而不是替换前一组，尽管行

sel_box.selectedIndex = 0;

其目标是在添加新选项之前重置选项

3(代码

var selectfirstText = "Select first a value from the set before!";
sel_box.html = '<option value="">' + selectfirstText + '</option>';

没有输出，根本不起作用

有解决上述三个问题的想法吗？

Answer 1

这里有一个不使用Jquery附加子级的解决方案。看看埃米尔·祖比尔的评论。我也会小心使用if(numFirstSet)，因为如果值为0，它将被评估为false。我认为你的预期结果应该在document.ready之后进行检查，而不是在onchange函数中。这样，您的"选择第一个值"选项在运行时就存在了。

let firstSet = document.getElementById("first_set");
$(document).ready(function() {
if (firstSet.value === "null") {
$("#second_set").html(
'<option value="">Select first a value from the set before!</option>'
);
}
$("#first_set").on("change", function() {
var numFirstSet = parseInt($(this).val());
// console.log(numFirstSet);
$("#second_set").html("");
var topSecondSet = 50;
var numRemaining = topSecondSet - numFirstSet;
for (var a = numRemaining; a < topSecondSet; a++) {
let opt = document.createElement("option");
opt.innerHTML = a;
opt.value = a;
document.getElementById("second_set").append(opt);
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="first_set">
<option selected disabled value="null">Nothing</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br /><br />
<select id="second_set"> </select>