2016-02-11 161 views
-2

我正在創建一個表單,在其中生成動態字段。如何在jquery中創建動態ID

  1. 在該動態字段中,我有一個選擇選項。在該選項中,有兩個選項可用於給出尺寸爲in fit/in和其他尺寸爲m/cm
  2. 如果我選擇合適,尺寸將以英尺爲單位。否則以米/釐米的代碼工作正常

  3. 但問題是,當我創建動態字段像5時間然後在那個時候5選項是否存在,如果我選擇一個只有變化正在發生。

  4. 在一個字段選項中,我知道原因,因爲所有動態ID的ID相同,那麼我可以爲該選擇選項創建動態ID。
  5. 略低於這裏,如果選擇五個時間的創建5充滿活力的領域,我知道它很廣來形容我的問題的動態生成場意思,但我需要解決

$(document).ready(function() { 
 
    var count = 0; 
 
    $("#sel").on('change', function() { 
 

 
    var counter = parseInt(this.value, 10); 
 
    $('#parent').change('<div id="first' + count + '">text</div>'); 
 
    var html = '<div class="form-group"><label class="col-sm-9 control-label"><h3><strong>Item Details</strong></h3></label></div>'; 
 
    var html1 = '<div class="row"><div class="form-group"> <label for="inputEmail3" class="col-sm-6 control-label">* Dimensions (Best Estimate):</label> <div class="col-sm-3"><select id="mySelect" class="form-control"><option>ft/in/lbs</option><option>m/cm/kg</option></select></div>\ 
 
    </div></div><br>'; 
 
    var html2 = '<div style="padding-left: 4cm;"><div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Length<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="length_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="length_md" id="myInput1" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="length_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="length_cmd" id="myInput2" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\ 
 
     </div>'; 
 
    var html3 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Width<?php echo str_repeat(' & nbsp ', 8);?></span><div class="input-group-addon"><input type="text" name="width_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="width_md" id="myInput3" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="width_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="width_cmd" id="myInput4" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\ 
 
     </div>'; 
 
    var html4 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Height<?php echo str_repeat(' & nbsp ', 7);?></span><div class="input-group-addon"><input type="text" name="height_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="height_md" id="myInput5" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="height_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="height_cmd" id="myInput6" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\ 
 
     </div>'; 
 
    var html5 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Weight<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="weight" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="weightd" id="myInput7" value="lbs" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Quantity&nbsp;&nbsp;</span><div class="input-group-addon"><input type="text" name="quantity" id="myInput" placeholder="" maxlength="2" size="2" aria-describedby="basic-addon1" required></div>\ 
 
     </div></div></br></br>'; 
 
    var html6 = '<div class="form-group"><label for="inputEmail3" class="col-sm-6 control-label">Item description</label><div style="padding-left: 4cm;"><textarea class="form-control" rows="5" id="comment" name="additional_detail" placeholder="Item description"></textarea></div>\ 
 
     </div></br></br></br>'; 
 
    count++; 
 
    var str1 = ""; 
 
    for (var i = 1; i < counter; i++) { 
 
     str1 += [html, html1, html2, html3, html4, html5, html6]; 
 
     str1 = str1.replace(/,/gi, "\n").replace(/^,/, ""); 
 
    } 
 
    $("#inrlog").empty().append(str1); 
 

 
    }) 
 
});

這裏是在該id上採用選擇選項id的代碼,其改變該字段兩個不同的值一英尺/米其他以米/釐米爲單位

$('#mySelect').on('change', function() { 
 
    var value = $(this).find(':selected').data('value'); 
 
    var value1 = $(this).find(':selected').data('value1'); 
 
    var value2 = $(this).find(':selected').data('value2'); 
 
    $('#myInput1').attr('value', value); 
 
    $('#myInput2').attr('value', value1); 
 
    $('#myInput3').attr('value', value); 
 
    $('#myInput4').attr('value', value1); 
 
    $('#myInput5').attr('value', value); 
 
    $('#myInput6').attr('value', value1); 
 
    $('#myInput7').attr('value', value2); 
 
});

+8

請,語法段落。 –

回答

0

根據你的代碼,你需要一個字符串爲html1的動態選擇標籤。在當前的代碼中,你沒有html變量的循環。

你可以做的是,接受一個名爲html1而不是變量的函數,然後在該循​​環中調用該函數,並將計數器(i)變量傳遞給該函數,並將select標記返回爲動態字符串。

$(document).ready(function() { 
 
    var count = 0; 
 
    $("#sel").on('change', function() { 
 

 
    var counter = parseInt(this.value, 10); 
 
    $('#parent').change('<div id="first' + count + '">text</div>'); 
 
    var html = '<div class="form-group"><label class="col-sm-9 control-label"><h3><strong>Item Details</strong></h3></label></div>'; 
 
    
 
    var html2 = '<div style="padding-left: 4cm;"><div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Length<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="length_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="length_md" id="myInput1" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="length_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="length_cmd" id="myInput2" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\ 
 
     </div>'; 
 
    var html3 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Width<?php echo str_repeat(' & nbsp ', 8);?></span><div class="input-group-addon"><input type="text" name="width_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="width_md" id="myInput3" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="width_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="width_cmd" id="myInput4" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\ 
 
     </div>'; 
 
    var html4 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Height<?php echo str_repeat(' & nbsp ', 7);?></span><div class="input-group-addon"><input type="text" name="height_m" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="height_md" id="myInput5" value="ft" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><div class="input-group-addon"><input type="text" name="height_cm" id="myInput" placeholder="" maxlength="8" aria-describedby="basic-addon1" size="8" required></div><div class="input-group-addon"><input type="text" name="height_cmd" id="myInput6" value="in" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div>\ 
 
     </div>'; 
 
    var html5 = '<div class="input-group"><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Weight<?php echo str_repeat(' & nbsp ', 6);?></span><div class="input-group-addon"><input type="text" name="weight" id="myInput" placeholder="" maxlength="8" size="8" aria-describedby="basic-addon1" required></div><div class="input-group-addon"><input type="text" name="weightd" id="myInput7" value="lbs" maxlength="1" size="1" aria-describedby="basic-addon1" readonly></div><span class="input-group-addon" id="basic-addon1" style="background-color: #e3e3e3;">Quantity&nbsp;&nbsp;</span><div class="input-group-addon"><input type="text" name="quantity" id="myInput" placeholder="" maxlength="2" size="2" aria-describedby="basic-addon1" required></div>\ 
 
     </div></div></br></br>'; 
 
    var html6 = '<div class="form-group"><label for="inputEmail3" class="col-sm-6 control-label">Item description</label><div style="padding-left: 4cm;"><textarea class="form-control" rows="5" id="comment" name="additional_detail" placeholder="Item description"></textarea></div>\ 
 
     </div></br></br></br>'; 
 
    count++; 
 

 
###The function is here######## 
 

 
    function html1(i){ 
 
    return '<div class="row"><div class="form-group"> <label for="inputEmail3" class="col-sm-6 control-label">* Dimensions (Best Estimate):</label> <div class="col-sm-3"><select id= i+"mySelect" class="form-control"><option>ft/in/lbs</option><option>m/cm/kg</option></select></div>\ 
 
    </div></div><br>' 
 
    } 
 

 

 
    var str1 = ""; 
 
    for (var i = 1; i < counter; i++) { 
 
     str1 += [html, html1(i), html2, html3, html4, html5, html6]; 
 
     str1 = str1.replace(/,/gi, "\n").replace(/^,/, ""); 
 
    } 
 
    $("#inrlog").empty().append(str1); 
 

 
    }) 
 
});

在該函數中,選擇標記如下改變,這取動態I的值。

<select id= i+"mySelect" class="form-control"><option>ft/in/lbs</option><option>m/cm/kg</option></select> 
+0

你好,你試過這個嗎? – Sravan

+0

是的,我嘗試這個,但它不工作 –