javascript - 没有使用 java 脚本更改 HTML 输入字段的属性

Question

我有一个表格，有两个字段文具类型和文具请求数量。表格的文具 rqst qty 字段接受数字。可以在此字段中输入的最小数量(数量)取决于文具类型字段的值，即如果文具类型字段值为“铅笔”，则文具请求数量字段的最小值属性应为 5，如果它是“记事本”，那么文具请求数量字段的最小属性应该是 10。我正在通过给定的代码执行此操作，但它不起作用。它始终给出第一个文具类型的 qnty
jsfiddle 是 js fiddle

function random() {
                    document.querySelector('[name="stationerytype[]"]').value = ""
  
                    var a = document.getElementById('purpose').value;
                    if (a === "Meeting") {
                    var datalist = "datalist1";
                    } else if (a === "Departmental") {
                    var datalist = "datalist2";
                    }
    
                    document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)

                    }
          
          var options = document.querySelectorAll(".option1");
            options.forEach(function(option) {
              option.addEventListener("keyup", function() {
                calculatingMinimunQuantity(option);
              });
              option.nextElementSibling.addEventListener('change', evt => {
                if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
              });
            });
            
            function calculatingMinimunQuantity(option) {
              var minimum = 0, step1 = 0;
              var value = option.value;
              if (value === "PENCIL") {
                minimum = "5";
                step1="5";
              } else if (value === "NOTEPAD") {
                minimum = "10";
                step1="10";
              }
              //   getting the quantity input field
              option.nextElementSibling.setAttribute("min", minimum);
              option.nextElementSibling.setAttribute("step", step1);
              
        }

<div class="col-sm-6">
                    <label for="purpose">Purpose</label>
                    <select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
                    <option ></option>
                    <option value="Meeting">Meeting</option>
                    <option value="Departmental">Departmental</option>
                    </select>
                    </div>
                  
        <td><input  type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off"  required>
                <datalist id="datalist1" >
                <option value=""></option>
                <option value="MEETING PEN">MEETING PEN</option>
                <option value="NOTEPAD">NOTEPAD</option>
                <option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
                <option value="PENCIL">PENCIL</option>
                </datalist> 
                
                <datalist id="datalist2" >
                <option value=""></option>
                <option value="A4 GREEN REAM">A4 GREEN REAM</option>
                <option value="A4 WHITE REAM">A4 WHITE REAM</option>
                <option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
                </datalist>
          </td>
                            
                    
                            
        <td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>

Answer 1

您正在尝试获取 nextSibling option 的元素在 JS 函数中，但 nextSibling选择的元素是 body元素。如果您使用 td元素，那么你需要正确使用 table JS 正常工作的元素。
这是更新的 HTML 和 JS 以满足您的要求。

<div class="col-sm-6">
  <label for="purpose">Purpose</label>
  <select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
    <option ></option>
    <option value="Meeting">Meeting</option>
    <option value="Departmental">Departmental</option>
  </select>
</div>
                    
<table>
  <tbody>
    <tr>             
      <td><input  type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off"  required>
        <datalist id="datalist1" >
          <option value=""></option>
          <option value="MEETING PEN">MEETING PEN</option>
          <option value="NOTEPAD">NOTEPAD</option>
          <option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
          <option value="PENCIL">PENCIL</option>
        </datalist> 

        <datalist id="datalist2" >
          <option value=""></option>
          <option value="A4 GREEN REAM">A4 GREEN REAM</option>
          <option value="A4 WHITE REAM">A4 WHITE REAM</option>
          <option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
        </datalist>
      </td>   
      <td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>
    </tr>
  </tbody>
</table>

这是更新JS

function random() {
                    document.querySelector('[name="stationerytype[]"]').value = ""
  
                    var a = document.getElementById('purpose').value;
                    if (a === "Meeting") {
                    var datalist = "datalist1";
                    } else if (a === "Departmental") {
                    var datalist = "datalist2";
                    }
    
                    document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)

                    }
          
          var options = document.querySelectorAll(".option1");
            options.forEach(function(option) {
              option.addEventListener("keyup", function() {
                calculatingMinimunQuantity(option);
              });
              option.nextElementSibling.addEventListener('change', evt => {
                if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
              });
            });
            
            function calculatingMinimunQuantity(option) {
           
              var minimum = 0, step1 = 0;
              var value = option.value;
              if (value === "PENCIL") {
                minimum = "5";
                step1="5";
              } else if (value === "NOTEPAD") {
                minimum = "10";
                step1="10";
              }
              
              //   getting the quantity input field
              option.parentNode.nextElementSibling.firstChild.setAttribute("min", minimum);
              option.parentNode.nextElementSibling.firstChild.setAttribute("step", step1);
              
        }