Ho il seguente codice html. È generato dal motore Razor. Questo è dinamico. Voglio dire che il no degli elementi nel menu a tendina può variare a seconda dell'utente. Devo replicare questo menu a discesa esattamente sotto lo stesso menu a discesa con nuovo ID e nuovo nome. Ho guardato here, here, here e here. Di seguito è riportato il mio html. Ho aggiunto commenti nel codice per ulteriori chiarimenti.Come aggiornare l'id e il nome dell'elemento html all'interno dell'elemento div?
<!-- the entire section with id and name template needs to be copied -->
<div id="template" name="template" class="form-group unique">
<label class="control-label col-md-2" for="Course">Course</label>
<!-- the drop down below has id and name as Course[0].Title
I need to increment index inside [] -->
<div class="col-md-10">
<select class="form-control drop valid" id="Course[0].Title" name="Course[0].Title">
<option value="1">Statistics</option>
<option value="2">Trigonometry</option>
<option value="3">Biology</option>
<option value="4">Neurology</option>
<option value="5">Applied</option>
<option value="6">Theoretical</option>
</select>
</div>
</div>
Ora mi si avvicinò con seguente codice jQuery. Copia solo una volta e quindi smette di funzionare. Ho controllato la console e non ci sono errori. Il codice javascript con commenti per chiarimenti è il seguente.
< script src = "~/Scripts/jquery-1.10.2.min.js" > < /script>
<script type="text/javascript
">
$(document).ready(function() {
\t //copy the section with class name unique
var clone = $('.unique').clone();
\t //Copy again as i am modifying the id,name of div with unique class
var clone2 = $('.unique').clone();
\t //initialize the index with 1, the item with 0 index is already in webpage.
var i = 1;
\t //Change name of drop down who has class drop and assign new name
$(".unique ").find(".drop ").attr("
name ", "
Course[0].Title ");
\t //Change id of drop down who has class drop and assign new id
$(".unique ").find(".drop ").attr("
id ", "
Course[0].Title ");
\t //on click of plus button, i add clone of drop down with parent div section and with new id and name
$("#
plus ").click(function() {
\t //Add after the element which has class unique
$('.unique').after(clone2);
\t //Find name inside unique and update
$(".unique ").find(".drop ").attr("
name ", "
Course[" + i + "].Title ");
\t //Find id inside unique and update
$(".unique ").find(".drop ").attr("
id ", "
Course[" + i + "].Title ");
\t //Increment the index
i = i + 1;
});
});
</script>
Cosa c'è di sbagliato nella sceneggiatura?
Questo funziona. Non ricevo valori nel mio controller. potrebbe esserci qualcosa in più da cercare. Sto controllando. una volta fatto, accetterò la risposta. Apprezzo gli sforzi. –
Prego. Modifico anche attr' id' e 'name' della classe' .unique' che cloni nel tuo codice perché ID deve essere univoco. –
Sì. Che ho notato. È perfetto. –