HTML <select>の名前を変更するforループ内の属性

私のコードでは、スニペットのコードを使用してユーザー入力に基づいてフィールドセットの複製を作成します。今の私の問題は、ユーザーがフォームを送信すると、Hashはフィールドセットの異なるインスタンスからの値を考慮しないということです。最後の値はすべての前の値を上書きします。以下の現在のシナリオの例として、params Hashがあります。HTML <select>の名前を変更するforループ内の属性

{ "member"=>"2", "lte_freq1"=>"4", "ru_type"=>"RRU", "4_way_rx"=>"No"}

ただし、希望する出力は以下のとおりです。ここではそのフィールドセットの2つのインスタンスが追加されているメンバー= 2の値：

{ "member"=>"2", "lte_freq1_1"=>"6", "ru_type_1"=>"RU", 
    "4_way_rx_1"=>"Yes", "lte_freq1_2"=>"4", "ru_type_2"=>"RRU", 
    "4_way_rx_2"=>"No" }

$(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); 
 
    cloned.appendTo('.sector_prop'); 
 

 
} 
 

 

 
}); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br>                 
 
<br> 
 

 
<br> 
 
<br> 
 

 
</head> 
 
<body> 
 
<form action="/form" method="post"> 
 
<div class="textbox"> 
 

 

 

 
<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> 
 
<select name="lte_freq1"> 
 
<option value="6">850</option> 
 
<option value="2">AWS</option> 
 
<option value="4">PCS</option> 
 
</select> 
 
<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> 
 

 

 

 
<input type="submit"> 
 
</form> 
 
<br> 
 
<br> 
 
</body>

出典

2017-07-09 ssharma

あなたは要素のクローンを作成しているが、それは魔法のようにフィールド名が更新されません。したがって、手動でインデックスを取得して、クローン作成時に新しいエレメントの名前を更新する必要があります。

$(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'); 
     cloned.find('select').prop('name', current_name + '_' + i); 
     cloned.appendTo('.sector_prop'); 
    } 
    }); 
});

出典

2017-07-09 16:12:32

マキシムに感謝します。もう1つの質問 - クローン内に複数の選択要素がある場合はどうなりますか？あなたの実装は 'select'の最初の一致を見つけ、concatを実行します。複数の要素を選択するにはどうすればよいですか？ – ssharma

HTML <select>の名前を変更するforループ内の属性

答えて

関連する問題