Question

大家好我正在使用一个带有5个输入框和一个选择框的网页表单当有人点击该按钮时，我会给出一个按钮，新行显示相同的5个输入字段和1个选择框。我能够显示输入框但无法显示选择框。

如何通过jquery创建选择框。

HTML PHP代码

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

我认为你必须将新元素添加到你的dom中。您应该使用的功能是appendChild()。

例如

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

如何通过jquery创建选择框

3 个答案: