使文本框的名稱匹配動態生成的選擇框的值

Question

我需要將表單發佈到CMS，並且CMS具有贍養費，子級支持，保險等的特定字段。我的問題是在我的表單中，並非全部這些框存在，直到用戶添加或從下拉列表中選擇它。

首先有一個名爲「selectBox」的選擇框，其中包含所有這些選項。如果用戶選擇「贍養費」，我希望相應文本框的名稱改爲「payment_alimony」，所以當我進行POST時，這些字段與CMS匹配。

接下來，如果用戶需要添加其他費用，他會點擊「添加費用」和選擇框彈出一個名爲「selectBox2」等多達10

我寧願能如果可能的話，不必爲每個選擇框設置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>