Question

这是我的Senario，我想通过点击添加更多按钮来添加选择框，但我还希望从之前选择的生成选择框中排除值。我想用jquery，希望提前，请详细指导。

这是我的代码

div id="testingDiv1" class="clonedInput" align="center">
<select name="somename" class="form-control" id="select">
<option value="PleaseSelectOne">Please Select One</option>
<option value="somevalue">somevalue</option>
<option value="somevalue">somevalue</option>
<option value="somevalue">somevalue</option>
<option value="somevalue">somevalue</option>
</select>
</div>

<script>
    $(function () {
      $('#btnAdd').click(function () {
        var num = $('.clonedInput').length, 
            newNum = new Number(num + 1), /
            newElem = $('#testingDiv' + num).clone().attr('id', 'testingDiv' + newNum).fadeIn('normal'); 


            newElem.find('.test-select').attr('id', 'ID' + newNum + '_select').attr('name', 'ID' + newNum + '_select').val('');
         $('#testingDiv' + num).after(newElem);
        $('#btnDel').attr('disabled', false);
        if (newNum == 5) $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit");
      });
      $('#btnDel').click(function () {


          var num = $('.clonedInput').length;

            $('#testingDiv' + num).slideUp('slow', function () {
              $(this).remove();

                if (num - 1 === 1) $('#btnDel').attr('disabled', true);

                $('#btnAdd').attr('disabled', false).prop('value', "ADD MORE");
              });

          return false;

        $('#btnAdd').attr('disabled', false);
      });
      $('#btnDel').attr('disabled', true);
    });
  </script>

Answer 1

Amir我已根据您的要求更新了jQuery，请检查https://jsfiddle.net/q1ehqv5d/1/

更新了jQuery

$(document).ready(function(){

  $('#btnAdd').click(function () {
        var num = $('.clonedInput').length, 
            newNum = new Number(num + 1), 
            newElem = $('#testingDiv' + num).clone().attr('id', 'testingDiv' + newNum).fadeIn('normal'); 
// Store the block in a variable
    var $block = $('.clonedInput:last');

        // Grab the selected value
    var theValue = $block.find(':selected').val();

        // Clone the block 
    var clone = $block.clone();

        // Find the selected value in the clone, and remove
    if(theValue !="PleaseSelectOne")
    clone.find('option[value=' + theValue + ']').remove();
// Grab the select in the clone
var $select = clone.find('select');
var newId="testingDiv"+newNum;
console.log(newId);
    // Update its ID by concatenating theValue to the current ID
$select.parent().attr('id', newId);

         $('#testingDiv' + num).after(clone);
        $('#btnDel').attr('disabled', false);
        if (newNum == 5) $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit");
      });
      $('#btnDel').click(function () {


          var num = $('.clonedInput').length;

            $('#testingDiv' + num).slideUp('slow', function () {
              $(this).remove();

                if (num - 1 === 1) $('#btnDel').attr('disabled', true);

                $('#btnAdd').attr('disabled', false).prop('value', "ADD MORE");
              });

          return false;

        $('#btnAdd').attr('disabled', false);
      });
      $('#btnDel').attr('disabled', true);
});

Answer 2

由于您还没有提供任何代码，我尝试重新创建方案，请检查 https://jsfiddle.net/q1ehqv5d/

<强> HTML

<button class="addMore">
Add More
</button>
<div class="main">
<input type="checkbox">One<br>
<input type="checkbox">Two<br>
<input type="checkbox">Three<br>
</div>

<强>的jQuery

$(document).ready(function(){
    $('.addMore').on('click', function(){

        $('input:checkbox').removeAttr('checked');

    $('.main').append('<input type=\"checkbox\">Some Text<br>');
  });
});

使用Jquery动态添加选择框

2 个答案: