使用 java 脚本未更改 HTML 输入字段的属性

我有一个表格，有两个字段文具类型和文具请求数量。表格的信纸 rqst 数量字段接受该数字。可以在此字段中输入的最小数量（数量）取决于信纸类型字段的值，即，如果信纸类型字段值为“铅笔”，则信纸请求数量字段的最小值属性应为 5，并且如果是“记事本”，那么文具请求数量字段的最小属性应该是 10。我正在按照给定的代码执行此操作，但它不起作用。它始终给出第一个文具类型的 qnty jsfiddle 是jsfiddle https://jsfiddle.net/fta6sdm8/3/show

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>

您正试图获得nextSibling的元素option在 JS 函数中，但是nextSibling选取的元素是body元素。如果您正在使用td元素，那么你需要正确使用tableJS 正常工作的元素。

这是更新的 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);
              
        }