Question

我有一个接受用户输入（部门数量（LTE））的HTML表单。根据用户输入，我克隆了表单的一些元素。提交表单后，哈希将传递给程序。我希望键的名称对于每个实例（基于用户输入创建）是唯一的。在当前设置中，我只能为第一个选择元素的键生成唯一名称。我希望能够为第二个选择元素做同样的事情。请建议。

提交时的当前输出 -

 {"member"=>"3", "lte_freq1"=>"6", "ru_type"=>"RU", "4_way_rx"=>"Yes", 
      "lte_freq1_1"=>"Yes", "lte_freq1_2"=>"Yes"}

输入的所需输出VALUE = 3

{"member"=>"3", "lte_freq1"=>"6", "ru_type"=>"RU", "4_way_rx"=>"Yes", 
      "lte_freq1_1"=>"6","ru_type_1"=>"RU", "4_way_rx_1"=>"Yes" "lte_freq1_2"=>"Yes","ru_type_2"=>"RU", "4_way_rx_2"=>"Yes"}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        var number = document.getElementById("member").value;
        var repeat = $('fieldset');
        var cloned;
        for (i = 1; i < number; i++) {
          cloned = repeat.clone(true);
          current_name = cloned.find('select').attr('name');
          console.log(current_name)
          console.log(cloned)
          cloned.find("*").prop('name', current_name + '_' + i);
          cloned.appendTo('.sector_prop');
        }
      });
    });
  </script>
</head>

<body>
  <form action="/form" method="post">
    <div class="textbox"></div>
    <br>
    <legend><b> RF Parameters</b></legend>
    <br> Number of Sectors (LTE)<br>
    <br>
    <input type="text" id="member" name="member" value="">
    <br>
    <br>
    <button>Generate Sector Properties</button>
    <br>
    <br>
    <div class="sector_prop">
      <fieldset>
        Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS for Band 4 and PCS for Band 2)<br>
        <br>
        <div id="freq">
          <select name="lte_freq1">
            <option value="6">850</option>
            <option value="2">AWS</option>
           <option value="4">PCS</option>
          </select>
        </div>
        <br>
        <br> Radio Type (Select "RU" for Rack-mount or RRU for Remote-Radio):<br>
        <br>
        <select name="ru_type">
          <option value="RU">RU</option>
          <option value="RRU">RRU</option>
        </select>
        <br>
        <br> 4 way Rx (Select "Yes" or "No"):<br>
        <br>
        <select name="4_way_rx">
          <option value="Yes">Yes</option>
          <option value="No">No</option>
        </select>
        <br>
        <br>
      </fieldset>
    </div>
    <br>
    <br>
    <br>
    <input type="submit">
  </form>
  <br>
  <br>
</body>

Answer 1

诀窍是定位name对象中具有cloned属性的每个元素。

这可以使用像cloned.find("[name]")这样的属性选择器轻松完成然后，更改每个名称。

$(document).ready(function(){
  $("button").click(function(e){
    e.preventDefault();
    
    var number = document.getElementById("member").value;
    var repeat = $('fieldset');
    var cloned;

    for (i=1;i<number;i++){
      cloned = repeat.clone(true);
      
      // Get all elements having a name attribute... And modify the name.
      cloned.find("[name]").each(function(){
        $(this).attr("name",$(this).attr("name")+"_"+i)
      });

      cloned.appendTo('.sector_prop');
    }
  });
});


// Just for this example
$("input[type='submit']").on("click",function(e){
  e.preventDefault();
  
  console.log( $("form").serialize() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="/form" method="post">
  <div class="textbox"></div>
  <br>

  <legend><b> RF Parameters</b></legend>
  <br>
  Number of Sectors (LTE)<br>
  <br>
  <input type="text" id="member" name="member" value="">
  <br>
  <br>

  <button>Generate Sector Properties</button>
  <br>
  <br>

  <div class="sector_prop">
    <fieldset>
      Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS 
      for Band 4 and PCS for Band 2)<br>
      <br>
      <div id="freq">
        <select name="lte_freq1">
          <option value="6">850</option>
          <option value="2">AWS</option>
          <option value="4">PCS</option>
        </select>
      </div>
      <br>
      <br>
      Radio Type (Select "RU" for Rack-mount or RRU for Remote-Radio):<br>
      <br>
      <select name="ru_type">
        <option value="RU">RU</option>
        <option value="RRU">RRU</option>
      </select>
      <br>
      <br>
      4 way Rx (Select "Yes" or "No"):<br>
      <br>
      <select name="4_way_rx">
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
      <br>
      <br>
    </fieldset>
  </div>

  <br>
  <br>
  <br>
  <input type="submit">
</form>
<br>
<br>

同样在CodePen

动态更改HTML表单中select元素的名称

1 个答案: