时间戳

首页 > 解决方案 > 用javascript填充一个选择，从之前的选择中减去一个值

javascript - 用javascript填充一个选择，从之前的选择中减去一个值

问题描述

我有一个带有两个输入的表单，用户必须从两个不同的集合中选择一个数字。第一个是从 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 选择可悲地显示单词“numToDisplay”，而不是计算值（var numToDisplay），也不是文本“首先从之前的集合中选择一个值！”。

编辑：经过一些建议，我尝试过

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

但得到了一个奇怪的结果：在 first_set 中完成选择后，显示了 numToDisplay 值，但它始终为 499。即 topSecondSet - 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 在 first_set 更改后填充，但有两个问题：

1） second_set 中的项目从 numFirstSet*10 而不是 numFirstSet+1 开始；

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

sel_box.selectedIndex = 0;

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

3）代码

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

没有输出，它根本不起作用。

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

标签： javascriptselectdynamic

解决方案

这是一个附加一个不使用 Jquery 的孩子的解决方案。看看 Emiel Zuurbiers 的评论。我也会小心使用，if(numFirstSet)因为如果值为 0，它将评估为假。我认为您的预期结果应该在 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>

推荐阅读