How to create select box via 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('');

    });

Possible duplicate of [JQuery: Dynamically create select Tag](http://stackoverflow.com/questions/10578619/jquery-dynamically-create-select-tag) — Douwe de Haan, May 10 '17 at 09:27

score 2 · Answer 1 · answered May 10 '17 at 09:08

2

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

answered May 10 '17 at 09:08

Jurij Jazdanov

1,248
8
11

that code is not working with my jquery i used that code at line 6 but now my whole code is not working – prameshwer May 10 '17 at 09:16

score 0 · Answer 2 · answered May 10 '17 at 09:39

0

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

Thanks everyone,

answered May 10 '17 at 09:39

prameshwer

121
16

score -2 · Answer 3 · edited May 10 '17 at 10:14

-2

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

edited May 10 '17 at 10:14

Julian

33,915
22
119
174

answered May 10 '17 at 09:05

Daniel Pfeil

83
9

1

This isn't an answer, you should put this in comments, or provide some code to help OP. – Serge K. May 10 '17 at 09:06
Your answer doesn't do anything except for echo the question. – Hunter May 10 '17 at 09:06
This is really a comment, not an answer. With a bit more rep, [you will be able to post comments](//stackoverflow.com/privileges/comment). – Rory McCrossan May 10 '17 at 09:08
yeah your right im looking for an example right now – Daniel Pfeil May 10 '17 at 09:08

How to create select box via jquery

3 Answers3