如何通过jquery创建选择框

Question

Hello everyone i am using a webform where with 5 input box and a select box i am giving a button when anyone click on that button a new row appear with same 5 input fields and 1 select box. I am able to display input box but unable to display select box.

How to create select box via jquery.

HTML PHP CODE

<?php
$i=1;
while($roold    =   mysql_fetch_array($result_ss_bill_item))
{
?>
<div id="entry<?php echo $i;?>" class="clonedInput">
<div class="col-md-6"><input class="particulares" type="text" name="particulares_<?php echo $i;?>" id="particulares_<?php echo $i;?>" required="required" value="<?php echo $roold['particulares'];?>"></div>
<div class="col-md-1"><input class="challan" type="text" name="challan_<?php echo $i;?>" id="challan_<?php echo $i;?>" required="required" value="<?php echo $roold['challan'];?>"></div>
<div class="col-md-1"><input class="qty" type="text" name="qty_<?php echo $i;?>" id="qty_<?php echo $i;?>" required="required" value="<?php echo $roold['qty'];?>"></div>
<div class="col-md-1"><input class="rate" type="text" name="rate_<?php echo $i;?>" id="rate_<?php echo $i;?>" required="required" value="<?php echo $roold['rate'];?>"></div>
<div class="col-md-1"><input class="amount" type="text" name="amount_<?php echo $i;?>" id="amount_<?php echo $i;?>" required="required" value="<?php echo $roold['amount'];?>"></div>
<div class="col-md-2">
<select class="taxtype" name="tax_<?php echo $i;?>">
<option>Vat</option>
<option>Service Tax</option>
</select>
</div>
</div>
<?php
$i=$i+1;
}
?>
<div class="col-md-12">
<button  class="submit btn btn-danger" type="button" id="btnAdd" value="add section">Add New </button>
</div> 

JQUERY CODE

 $('#btnAdd').click(function () {
    var num     = $('.clonedInput').length, // how many "duplicatable" input fields we currently have
     newNum  = new Number(num + 1),      // the numeric ID of the new input field being added
     newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('fast'); // create the new element via clone(), and manipulate it's ID using newNum value
     document.getElementById("totalrecord").value=+newNum;
        newElem.find('.particulares').attr('id', 'particulares_' + newNum).attr('placeholder', 'Particulares').attr('name', 'particulares_' + newNum).val('');
        newElem.find('.challan').attr('id', 'challan_' + newNum).attr('placeholder', 'challan').attr('name', 'challan_' + newNum).val('');
        newElem.find('.qty').attr('id', 'qty_' + newNum).attr('placeholder', 'Qty').attr('name', 'qty_' + newNum).val('');
        newElem.find('.rate').attr('id', 'rate_' + newNum).attr('placeholder', 'Rate').attr('name', 'rate_' + newNum).val('');
        newElem.find('.amount').attr('id', 'amount_' + newNum).attr('placeholder', 'Amount').attr('name', 'amount_' + newNum).val('');

    });

Answer 1

 $('#addSelectBtn').click(function(){ $('#container').append('<select><option>OPTION 1</option><option>OPTION 2</option></select>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='addSelectBtn'>Add Select</div> <div id='container'></div> 

Answer 2

newElem.find('.taxtype').attr('id', 'taxtype_' + newNum).attr('name', 'taxtype_' + newNum).val('');

感谢大家，

Answer 3

I think you have to add the new element to your dom. The function you should use is appendChild() .

For example

document.getElementById("parent").appendChild(newElem).