Question

我需要将表单发布到CMS，并且CMS具有Alimony，Child Support，Insurance等的特定字段。我的问题是，在我的表单中，并非所有这些框都存在，直到用户添加或选择它从下拉列表。

首先，有一个名为“selectBox”的选择框，其中包含所有这些选项。如果用户选择“Alimony”，我希望相应文本框的名称更改为“payment_alimony”，因此当我进行POST时，这些字段与CMS匹配。

接下来，如果用户需要添加其他费用，他将点击“添加费用”，弹出一个名为“selectBox2”的选择框，依此类推，最多10个。

如果可能，我希望能够在不必为每个selectBox分配10个单独函数的情况下执行此操作。

感谢您的协助！

<div id="income1" class="row clonedInput"><!-- Expandable Section: INCOME -->
                                <div class="item" id="item_income_source">
                                    <label for="income_source">Additional Income Source<a href="javascript:;" class="tooltip" title="Help Text Goes Here"></a></label>
                                    <select id="income_source" name="income_source"   >
                                        <option value="" selected="selected">- select -</option>
                                        <option value="alimony">Alimony</option>
                                        <option value="child_support">Child Support</option>
                                        <option value="disability">Disability</option>
                                        <option value="social_security">Social Security</option>
                                        <option value="pension">Pension</option>
                                        <option value="rental_protperty">Rental Property</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                <div class="item small-item third ">
                                    <label for="blank-space">&nbsp;</label>
                                </div>
                                <div class="item small-item third last" id="item_input_gross">
                                    <label for="input_gross">Amount ($)</label>
                                    <input type="text" id="input_gross" value="" name="input_gross" onkeyup="formatInt(this)" onChange="addIncome();" onclick="select();" class="IncometoAdd"  />
                                </div>
                            </div>
                            <div style="clear:both">
                                <input type="button" id="btnAdd-Income" value="(+) add source" />
                                <input type="button" id="btnDel-Income" value="(-) remove source" />
                            </div>

重复的Javascript：

$(function(){
// Add new element
$('#btnAdd-Income').click(function() {
    var num     = $('.clonedInput').length;
    var newNum  = new Number(num + 1);

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#income' + num).clone().attr('id', 'income' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.find('#item_income_source label').attr('for', 'income_source' + newNum);
    newElem.find('#item_income_source select').attr('id', 'income_source' + newNum).attr('name', 'income_source' + newNum).val('');
    newElem.find('#item_input_gross label').attr('for', 'input_gross' + newNum);
    newElem.find('#item_input_gross input').attr('id', 'input_gross' + newNum).attr('name', 'input_gross' + newNum).val('');

    // insert the new element after the last "duplicatable" input field
    $('#income' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel-Income').show();

    // Limit 6 sources  ***EDITABLE***
    if (newNum == 6)
        $('#btnAdd-Income').hide();
});

    // remove the last element
$('#btnDel-Income').click(function() {
    var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
    $('#income' + num).remove();        // remove the last element
    addIncome();

    // enable the "add" button
    $('#btnAdd-Income').show();

    // if only one element remains, disable the "remove" button
    if (num-1 == 1)
        $('#btnDel-Income').hide();
});

$('#btnDel-Income').hide();

}）;

Answer 1

这将有效：

$(function() {
  $('#btnAdd-Income').click(function() {
      source = $('.item').first().clone();
      source.find('input').val('');
      $('.item').last().after(source);
  });

  $('.item select').live('change', function() {
      name = $('option:selected',this).val();
     $('input.amount', $(this).closest('.item')).attr('name', name); 
  });
});

HTML：

<div class="item" id="item_income_source">
    <label for="income_source">Additional Income Source<a href="#" class="tooltip" title="Help Text Goes Here"></a></label>
    <select id="income_source" name="income_source"   >
     <option value="" selected="selected">- select -</option>
     <option value="alimony">Alimony</option>
     <option value="child_support">Child Support</option>
     <option value="disability">Disability</option>
     <option value="social_security">Social Security</option>
     <option value="pension">Pension</option>
     <option value="rental_protperty">Rental Property</option>
     <option value="other">Other</option>
   </select>

  <label for="input_gross">Amount ($)</label>
  <input type="text" id="input_gross" class="amount"    />
 <br>
</div>
</div>
<div style="clear:both">
 <input type="button" id="btnAdd-Income" value="(+) add source" />
 <input type="button" id="btnDel-Income" value="(-) remove source" />
</div>

jsFiddle：http://jsfiddle.net/ft6ME/32/

Answer 2

如果我理解你的话，这就是你所需要的：

<select onChange="this.name = 'payment_'+this.value">
    <option value="">Select one...</option>
    <option value="alimony">Alimony</option>
    ...
</select>

使文本框的名称与动态生成的选择框的值匹配

2 个答案: