Question

我想通过点击button来添加多选复选框。我正在使用bootstrap multiselect。除了bootstrap multiselect之外的其他任何东西也可以。单击按钮后，功能对于mutiselct复选框不起作用。

＆＃13;

$('#addSupplierbtn').click(function(){
   $('#webhost').html($('#multipleSupplier').html());
});

＆＃13;

<div id="multipleSupplier" >
  <select multiple="multiple" size="10" name="checked[]" id="chked" class='multiselect' >
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3" selected="selected">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6" selected="selected">Option 6</option>
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
    <option value="option0">Option 10</option>
  </select>
</div>

<!-- begin snippet: js hide: false -->

＆＃13;

Answer 1

＆＃13;

var counter = 0;


$('#addSupplierbtn').click(function(){
  
    var anotherselect = $('.multiselect:nth-child(1)').clone();
  anotherselect.attr('id', "multiselect"+counter)
   $('.multiselect').last().after(anotherselect);
  counter ++;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="multipleSupplier" >
  <select multiple="multiple" size="10" name="checked[]" id="multiselect" class='multiselect' >
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3" selected="selected">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6" selected="selected">Option 6</option>
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
    <option value="option0">Option 10</option>
  </select>
</div>

<input type='button' id='addSupplierbtn' value='Another Select'>

＆＃13;

试试这种方式..

Answer 2

$('#addSupplierbtn').click(function(){
    $('#webhost').html($('#multipleSupplier').html());
});

<div id="multipleSupplier" >
    <select multiple="multiple" size="10" name="checked[]" id="chked" class='multiselect' >
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3" selected="selected">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
        <option value="option6" selected="selected">Option 6</option>
        <option value="option7">Option 7</option>
        <option value="option8">Option 8</option>
        <option value="option9">Option 9</option>
        <option value="option0">Option 10</option>
    </select>
</div>

<!-- begin snippet: js hide: false -->

如何通过单击按钮添加多选复选框

2 个答案: