如何通過單擊按鈕添加多選複選框

我想通過單擊按鈕添加多選複選框。我正在使用bootstrap multiselect.If除bootstrap multiselect以外的任何其他內容也可以。在點擊按鈕後，功能不適用於mutiselct複選框。如何通過單擊按鈕添加多選複選框

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

<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 -->

來源

2016-03-07 vijaikarthik

它的工作原理，如果你按住CTRL鍵 –

@wateriswet是啊我知道我在問什麼是我想多個選擇的div id webhost的另一個副本沒有打破任何功能的多選複選框 – vijaikarthik

$('#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 -->

來源

2016-03-07 01:34:36

我得到div的另一個副本，但缺少一些功能。 – vijaikarthik

此代碼從OP發佈的代碼發生了什麼變化？如果您可以添加關於您更改的內容和原因的解釋將會很有幫助。 – Carpetsmoker

var counter = 0; 
 

 

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

<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'>

試試這個方法..

來源

2016-03-07 02:18:23 guradio

thanks.it正在工作，但是當我試圖檢查第二個下拉選項時，它也影響第一個multiselet – vijaikarthik

@vijaikarthik我已經添加了一個「動態ID」，您可以只使用一個變量並增加變量以確定哪個「ID」使用 – guradio

不能get.above代碼不適合我。 – vijaikarthik

如何通過單擊按鈕添加多選複選框

回答

相關問題