个人中心
gpt4 book ai didi

javascript - 无法删除元素或重置选择

转载 作者：行者123 更新时间：2023-11-28 04:54:24 24 4
gpt4 key购买 nike

我正在尝试消除由 Javascript 代码动态创建的重复 select 元素。

我有两种类型的 select 元素。单击添加元素按钮时会出现第一个。它有两个下拉选项:“访问控制”和“CCTV”。

如果选择了 CCTV，则会出现第二个 select 元素，其中“1”和“2”作为下拉选项。

然后，我还有另外两个按钮:删除元素和全部删除。

例如，如果我单击全部删除，所有元素都会被删除，包括 CCTV 的第二个select 元素。

问题:

当我再次单击添加元素并再次选择“CCTV”时，会出现两个额外的 select 元素，而不是只有一个。

Here's the JSFiddle demo. 

<html>

<head>
  <title>Create Elements Dynamically using jQuery</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
  </script>
  <style>
    body {
      font: 13px verdana;
      font-weight: normal;
    }
    
    div.box {
      margin-bottom: 10px;
      background-color: #f7f7f7;
      border: 1px solid #d7d7d7;
      border-radius: 3px;
      border-bottom: 1px solid rgb(169, 160, 165);
    }
  </style>
</head>

<body>
  <div id="main">
    <input type="button" id="btAdd" value="Add Element" class="bt" />
    <input type="button" id="btRemove" value="Remove Element" class="bt" />
    <input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
  </div>
  <div id="tes">
  </div>
  <script>
    $(document).ready(function() {

      var iCnt = 0;
      // CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
      var container = $(document.createElement('div')).css({
        padding: '5px',
        margin: '20px',
        width: '170px',
        border: '1px dashed',
        borderTopColor: '#999',
        borderBottomColor: '#999',
        borderLeftColor: '#999',
        borderRightColor: '#999'
      });

      $('#btAdd').click(function() {
        if (iCnt <= 2) {

          iCnt = iCnt + 1;

          // ADD TEXTBOX.
          $(container).append('<select class="input" id=tb' + iCnt + ' ' +
            '><option value="Access">Access Control</option><option value="CCTV">CCTV</option></select>');



          $(document).ready(function() {
            $(document).on('change', '#tb' + iCnt, function() {


              var method = $('option:selected').val();

              if (method == 'Access') {





              } else if (method == 'CCTV') {





                $('#tes').append('<select id="quantity-' + iCnt + '"><option value="1">1</option><option value="1">2</option></select>');

              }

            });
          });



          // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
          if (iCnt == 1) {

            var divSubmit = $(document.createElement('div'));
            $(divSubmit).append('<input type=button class="bt"' +
              'onclick="GetTextValue()"' +
              'id=btSubmit value=Submit />');

          }

          // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
          $('#main').after(container, divSubmit);
        }
        // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
        // (20 IS THE LIMIT WE HAVE SET)
        else {
          $(container).append('<label>Reached the limit</label>');
          $('#btAdd').attr('class', 'bt-disable');
          $('#btAdd').attr('disabled', 'disabled');
        }
      });

      // REMOVE ONE ELEMENT PER CLICK.
      $('#btRemove').click(function() {
        if (iCnt != 0) {

          $('#tb' + iCnt).remove();
          $('#add' + iCnt).remove();


          $('#quantity-' + 1).val('').trigger('chosen:updated');


          iCnt = iCnt - 1;
          alert(iCnt);
          $('#quantity-' + 1).remove();

        }

        if (iCnt == 0) {
          $(container)
            .empty()
            .remove();

          $('#btSubmit').remove();
          $('#btAdd')
            .removeAttr('disabled')
            .attr('class', 'bt');
        }
      });

      // REMOVE ALL THE ELEMENTS IN THE CONTAINER.
      $('#btRemoveAll').click(function() {
        $(container)
          .empty()
          .remove();

        $('#btSubmit').remove();
        iCnt = 0;

        $('#btAdd')
          .removeAttr('disabled')
          .attr('class', 'bt');
      });
    });

    // PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
    var divValue, values = '';

    function GetTextValue() {

      $(divValue)
        .empty()
        .remove();

      values = '';

      $('.input').each(function() {
        divValue = $(document.createElement('div')).css({
          padding: '5px',
          width: '200px'
        });
        values += this.value + '<br />'
      });

      $(divValue).append('<p><b>Your selected values</b></p>' + values);
      $('body').append(divValue);
    }
  </script>
</body>

</html>

最佳答案

我不太明白你的问题，但我想就是这样。您只想添加一次动态select(数量)，因此需要创建一个变量var CCTV = false;来进行控制。

我添加了一个函数getval来获取所选选择的值。因为当您使用 $('option: selected') 时，您会得到一个包含页面上所有选择的数组，导致您验证错误的对象。

$(document).ready(function() {
    // CREATE A "DIV" ELEMENT AND DESIGN IT USING jQuery ".css()" CLASS.
    var container = $(document.createElement('div')).css({
        padding: '5px',
        margin: '20px',
        width: '170px',
        border: '1px dashed',
        borderTopColor: '#999',
        borderBottomColor: '#999',
        borderLeftColor: '#999',
        borderRightColor: '#999'
    });

    $('#btAdd').click(function() {
        if (iCnt <= 2) {

            iCnt = iCnt + 1;

            // ADD TEXTBOX.
            $(container).append('<select class="input" id=tb' + iCnt + ' ' +
                ' onchange="getval(this);"><option value="Access">Access Control</option><option value="CCTV">CCTV</option></select>');

            $(document).ready(function() {

                $(document).on('change', '#tb' + iCnt, function() {

                    var method = $('option:selected').val();
                    if (method == 'Access') {

                    } else if (method == 'CCTV') {
                    
                    }
                });
            });

            // SHOW SUBMIT BUTTON IF ATLEAST "1" ELEMENT HAS BEEN CREATED.
            if (iCnt == 1) {

                var divSubmit = $(document.createElement('div'));
                $(divSubmit).append('<input type=button class="bt"' +
                    'onclick="GetTextValue()"' +
                    'id=btSubmit value=Submit />');

            }

            // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
            $('#main').after(container, divSubmit);
        }
        // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON.
        // (20 IS THE LIMIT WE HAVE SET)
        else {
            $(container).append('<label>Reached the limit</label>');
            $('#btAdd').attr('class', 'bt-disable');
            $('#btAdd').attr('disabled', 'disabled');
        }
    });

    // REMOVE ONE ELEMENT PER CLICK.
    $('#btRemove').click(function() {    
        if (iCnt != 0) {
            $('#tb' + iCnt).remove();
            $('#add' + iCnt).remove();
            $('#quantity-' + iCnt).remove();
            iCnt = iCnt - 1;
        }
        if (iCnt == 0) {
            CCTV = false;
            $(container).empty().remove();
            $('#btSubmit').remove();
            $('#quantity').remove();
            $('#btAdd').removeAttr('disabled').attr('class', 'bt');
        }
    });

    // REMOVE ALL THE ELEMENTS IN THE CONTAINER.
    $('#btRemoveAll').click(function() {
        CCTV = false;
        $('#quantity').remove();
        $(container).empty().remove();
        $('#btSubmit').remove();
        iCnt = 0;
        $('#btAdd').removeAttr('disabled').attr('class', 'bt');
    });
});

// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';
var CCTV = false;
var iCnt = 0;

function GetTextValue() {
    $(divValue).empty().remove();
    values = '';
    $('.input').each(function() {
        divValue = $(document.createElement('div')).css({
            padding: '5px',
            width: '200px'
        });
        values += this.value + '<br />'
    });
    $(divValue).append('<p><b>Your selected values</b></p>' + values);
    $('body').append(divValue);
}

function getval(sel)
{
  if (sel.value == 'CCTV') 
  {
      if (!CCTV) {
          $('#tes').append('<select id="quantity"><option value="1">1</option><option value="1">2</option></select>');
          CCTV = true;
      }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
    <div id="main">
        <input type="button" id="btAdd" value="Add Element" class="bt" />
        <input type="button" id="btRemove" value="Remove Element" class="bt" />
        <input type="button" id="btRemoveAll" value="Remove All" class="bt" /><br />
    </div>
    <div id="tes">
    </div>    </body>

关于javascript - 无法删除元素或重置选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42661651/

24 4 0
文章推荐： javascript - 纠正 angularJS 中的用户输入
文章推荐： javascript offsetTop 属性既成功又同时出现错误
文章推荐： html - Bootstrap 3 行太宽给出水平滚动条
文章推荐： javascript - JSP 中的预输入
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com