jQuery - 如何为克隆选择添加新名称

时间:2012-01-27 15:18:48

标签: jquery select input clone

嗨,我遇到了代码问题:

我想为新创建的选项添加新名称值,也许我会显示

这是jQuery javascript:

    $(document).ready(function() {
        $('#plus').click(function() {
            //variables for input
            var num     = $('.inputCopy').length;
            var newNum  = new Number(num + 1);

            var newInput = $('#input' + num).clone().attr('id', 'input' + newNum);


            newInput.children(':first').attr('id', 'input' + newNum).attr('class','next' + num);

            $('#input' + num).after(newInput);
            $('#del').css({display: ''});

            //if 5 inputs hide add input
            if (newNum == 5)
                $('#add').css({display: 'none'});
        });
.....
    });

这是HTML:

<div class="box0">
 <ul>
   <li>Set of selects to clone</li>
   <li>
    <ul>
     <li></li>
     <li>Select 1</li>
     <li>Select 2</li>
    </ul>
   </li>
   <li id="input1" class="inputCopy">
    <ul class="some">
      <li class="selects">Selects set &new value&</li>
      <li>
        <select name="Select[Ask][&new value&][Adults]" id="parent">
          <option label="1" value="1">1</option>
          <option label="2" value="2">2</option>
          <option label="3" value="3">3</option>
          <option label="4" value="4">4</option>
        </select>
       </li>
       <li>
        <select name="Select[Try][&new value&][Children]" id="children">
         <option label="0" value="0">0</option>
         <option label="1" value="1">1</option>
         <option label="2" value="2">2</option>
         <option label="3" value="3">3</option>
         <option label="4" value="4">4</option>
        </select>
      </li>
    </ul>
   </li>
    <li class="pnav" id="minus"><a href="javascript:void(0);" >delete</a></li>
<li class="pnav" id="plus"><a href="javascript:void(0);" >add selects</a>   </li>
</li>
  </ul>
 </div>

我的问题是这两个选项都有名字,我想把新值只放在我写&amp; new value&amp; 的位置,我怎么能只为新创建的选择呢。< / p>

如果新的选择集合等1。

我希望我的问题很容易解决,但我找不到解决方案

1 个答案:

答案 0 :(得分:0)

我稍微修改了脚本,我相信我找到了一个解决方案(如果我确实理解了你的问题)。在HTML中,我将“/ 新值 /”替换为“1”,使其成为:

<select name="Select[Ask][1][Adults]" id="parent">

对于脚本,我添加了一个计数器(“nextSelectValue”),它将保存要插入的值。完成元素的克隆后,它会找到select-element并使用regex-expression替换该数字。因为这只是“加” - 侧,所以你必须相应地为“删除”边更新“nextSelectValue”变量。这是脚本:

// Variable for keeping track of what number is next
var nextSelectValue = 2;
var newInput;

$(document).ready(function() {
    $('#plus').click(function() {

      //variables for input
      var num     = $('.inputCopy').length;
      var newNum  = new Number(num + 1);

      // Clone select and update id
      newInput = $('#input' + num).clone().attr('id', 'input' + newNum);

      // Update "new value" and variable "nextSelectValue"
      var selectInput = newInput.find('select');
      selectInput.attr('name', selectInput.attr('name').replace(/\d+/, new String(nextSelectValue)));
      nextSelectValue += 1;

      newInput.children(':first').attr('id', 'pokoj' + newNum).attr('class','next' + num);

      $('#input' + num).after(newInput);
      $('#del').css({display: ''});

      //if 5 inputs hide add input
      if (newNum == 5)
          $('#add').css({display: 'none'});
    });
});

如果您有任何问题,请告诉我。

编辑:如果您使用的是带有两个整数的名称,而不是:

selectInput.attr('name', selectInput.attr('name').replace(/\d+/, new String(nextSelectValue)));

使用此

selectInput.attr('name', selectInput.attr('name').replace(/\d(?=[^\d]*\d)/, new String(nextSelectValue)));

但请注意,只有在字符串

中只有两个数字时才会有效