使用 jQuery 追加时重复输入

Question

代码如下：

    <form class="ui form attached fluid loading segment" onsubmit="return contact(this)">
    <div class="field">
    <label>Preferred Tour</label>
        <div class="field">
          <?php
            $conn=mysqli_connect('####','####','####','####');

            echo '<select required id="tourInfo">';
            echo '<option value="" selected disabled>--Preferred Tour--</option>';
            $db = mysqli_query($conn, "SELECT `id`,`tourprice`,`tourname` FROM `available_tours`");
            while ($d=mysqli_fetch_assoc($db)) {
              
              echo "<option value=".$d['id']." id=".$d['tourname']. " data-price=".$d['tourprice'].">".$d['tourname']."</option>";
            
            }
              
            echo "</select>";
          ?>
        </div>   
    </div>
    <div class="field" id="hiddenTortu" style="display: none;"> 
    <label>Attention</label> 
        <div class="ui icon">
          <p><b>The minimum of people for this tour is 5, less than 5 the tour is not realisable</b></p>
        </div>
    </div>
    <div class="field">  
      <label>Available Time</label>
      <div class="field">
        <?php
          $conn=mysqli_connect('####','####','####','####');

          echo '<select name="gender" required id="timeInfo">';
          echo '<option value="" selected disabled>--Preferred Time--</option>';
          $db = mysqli_query($conn, "SELECT `time_real` FROM `available_time`");
          while ($d=mysqli_fetch_assoc($db)) {
            echo "<option value=".$d['time_real'].">".$d['time_real']."</option>";
          }
            
          echo "</select>";
        ?>
      </div>
    </div>
  <div class="two fields"> 
      <div class="field" id="pax"> 
          <label>Please specify the number of People according to the perred tour selection</label>

这里根据旅​​游选择从以下脚本开始问题我正在尝试设置最小值和最大值，以便用户无法为旅游中的人选择更多数字。

问题是当用户选择第一个选项，然后意识到最好的选项是另一个选项时，当他/她进行另一个选择时，使用 jQuery 创建的附加的输入仍然存在，并且由于新的选择，一个新的输入已创建。

意图是，如果用户选择选项 1，则输入附加会根据选项 1 出现，但如果用户后悔并更喜欢选项 2，则选项 1 的输入会消失，并且会出现根据选项 2 的新输入，等等为整个 if 条件打开。

          <script>
                $(document).ready(function(){
                  $('#tourInfo').on('change', function() {
                    if ( this.value == '1')
                    {
                      $("#pax").append($('<input placeholder="Number of People" type="number" id="peopleInfo" min="1" max="2"  value="1" required>'));
                                  (function ($) {
                          $.fn.restrict = function () {
                              return this.each(function(){
                                  if (this.type && 'number' === this.type.toLowerCase()) {
                                      $(this).on('change', function(){
                                          var _self = this,
                                              v = parseFloat(_self.value),
                                              min = parseFloat(_self.min),
                                              max = parseFloat(_self.max);
                                          if (v >= min && v <= max){
                                              _self.value = v;
                                          }
                                          else {
                                              _self.value = v < min ? min : max;
                                          }
                                      });
                                  }
                              });
                          };
                      })(jQuery);

                      $('#peopleInfo').restrict();

                    }
                    else if (this.value == '2')

                      $("#pax").append($('<input placeholder="Number of People" type="number" id="peopleInfo" min="3" max="5"  value="3" required>'));
                                  (function ($) {
                          $.fn.restrict = function () {
                              return this.each(function(){
                                  if (this.type && 'number' === this.type.toLowerCase()) {
                                      $(this).on('change', function(){
                                          var _self = this,
                                              v = parseFloat(_self.value),
                                              min = parseFloat(_self.min),
                                              max = parseFloat(_self.max);
                                          if (v >= min && v <= max){
                                              _self.value = v;
                                          }
                                          else {
                                              _self.value = v < min ? min : max;
                                          }
                                      });
                                  }
                              });
                          };
                      })(jQuery);

                      $('#peopleInfo').restrict();
                    }
                    else if (this.value == '3')
                    {
                      $("#pax").append($('<input placeholder="Number of People" type="number" id="peopleInfo" min="6" max="15"  value="6" required>'));
                                  (function ($) {
                          $.fn.restrict = function () {
                              return this.each(function(){
                                  if (this.type && 'number' === this.type.toLowerCase()) {
                                      $(this).on('change', function(){
                                          var _self = this,
                                              v = parseFloat(_self.value),
                                              min = parseFloat(_self.min),
                                              max = parseFloat(_self.max);
                                          if (v >= min && v <= max){
                                              _self.value = v;
                                          }
                                          else {
                                              _self.value = v < min ? min : max;
                                          }
                                      });
                                  }
                              });
                          };
                      })(jQuery);
                      $('#peopleInfo').restrict();
                    }...
                    
                              ...});
                          };
                      })(jQuery);

                      $('#peopleInfo').restrict();
                    }
                  });
            });
        </script>
      </div> 
      <div class="field"> 
          <label><br>Date of Tour</label>
          <input type="text" readonly required id="tourDate" class="datepicker-here form-control" placeholder="ex. August 03, 1998">
      </div>  
  </div>
  <div style="text-align:center">
    <div>
      <label>Ensure all details have been filled correctly</label>
    </div>
    <button class="ui green submit button">Submit Details</button>
  </div> 
</form>
</div>

Answer 1

将您的脚本从 id 为 pax 的 div 中移出，然后 在追加之前清除带有 id pax 的元素的 html：

 //Using JQuery
 $('#pax').html('');