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

我需要在CMS上发布一个表单，CMS有赡养费、子女抚养费、保险等特定字段。我的问题是，在我的表单中，不是所有这些框都存在，直到用户添加它或从下拉列表中选择它

首先，有一个名为selectBox的选择框，其中包含所有这些选项。如果用户选择Alimony I want the name of the correct textbox to payment_Alimony，那么当我发表文章时，字段将与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>

})

这将起作用：

$(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:

---

jsFIDLE:

如果我理解正确，这就是您所需要的：

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

---

你现有的代码在哪里？您尝试过什么？jQuery解决方案可以吗？您能否至少展示一下表单的基本结构，以便我们知道从何处开始？看看当您提供完整的问题时，您能以多快的速度得到好的答案这个论坛太棒了。直到今天我才需要发帖，通常在这里所有的东西都很容易找到！对不起，我把球掉在这上面了。文本框名称需要更改：只需将this.name更改为您想要影响的任何名称。文本框随着其增量而更改名称，是否有方法动态地将其指定为目标？我根据您最初的问题编写了我的小提琴，因此这应该接近您要查找的内容。玩一会儿小提琴，让我知道它是否接近你需要的。请参阅更新。如果你想让选择框以递增方式命名为“selectBox”，请告诉我，但我不知道这有什么用。祝你好运！谢谢你的来信。我不知道你在不克隆选择框的情况下让它直观是什么意思。我的代码克隆了整行，所以我想现在我需要弄清楚如何让文本框的名称与同一行上选择框的值匹配。啊，好的。这正是我的代码所做的。查看fiddle链接并检查文本框。当您在选择列表中选择另一个选择时，您可以看到名称的更改。太棒了！快速提问，为什么文本框的值在本例中重复？例如，如果我添加第一个值500，然后添加一个新费用，则默认值为500。

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

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