Je dois créer de manière dynamique quelques éléments "select" dans un fichier html. Et j'ai également l'intention de créer le même montant "select" éléments selon la valeur de l'ancien créé "select" éléments.Comment traiter les événements onchange pour les éléments sélectionnés qui sont créés dynamiquement en utilisant javascript?
Ainsi, je vais avoir un ensemble de paire d'éléments "select". Lorsque la première valeur sélectionnée de l'élément "select" est modifiée, les deuxièmes éléments "select" actualiseront ses options en utilisant les enregistrements correspondants dans une base de données.
Mon problème est que je ne peux pas recevoir la valeur correcte du premier élément "select". Chaque fois que l'événement onchange est appelé, la valeur transmise à la fonction onchange (dans mon cas, "fillSource()" est la valeur avant que la modification ne survienne au lieu de la valeur sélectionnée)
? pour résoudre ce problème
ce qui suit est mon code javascript:
<script>
var selectCount = 1;
var cats = #{dropCatsJson};
var subcats = #{dropSourceJson};
function addNewSource() {
var inputchange = document.createElement('select');
inputchange.options[0] = new Option("pls Select", "0");
inputchange.id="schange";
var input1 = document.createElement('select');
for(var i=0;i< cats.length;i++) {
var s = cats[i];
input1.options.add(new Option(s.Name, s.Id));
}
input1.id = 's' + selectCount;
//input1.onchange = new Function("alert(\"input1 changed\")");
input1.onchange = new Function("fillSource(" + input1.value + ")");
document.getElementById('newSource').appendChild(input1);
document.getElementById('newSource').appendChild(inputchange);
selectCount = selectCount + 1;
}
function fillSource(input1)
{
var dropsub = document.getElementById("schange");
dropsub.options.length = 0;//clear all the options.
for(var i=0;i< subcats.length;i++) {
var s = subcats[i];
if(s.ParentId == input1.value)
{
dropsub.options.add(new Option(s.Name, s.Id));
}
}
}
</script>
=========================== ============================================= == code final qui fonctionne Veuillez noter que vous devez ajouter l'événement onchange pour les nouveaux créé éléments de sélection comme ceci:
input1.onchange = function(){fillsource(input1.value)};
voici mon code test.html:
<html>
<script type="text/javascript">
var selectCount = 1;
function addNewSearch()
{
//alert("add");
var input1 = document.createElement('select');
input1.options[0] = new Option("s1","1");
input1.options[1] = new Option("s2","2");
input1.name = 's' + selectCount;
input1.id = 's' + selectCount;
input1.onchange = function(){fillsource(input1.value)};
document.body.appendChild(input1);
selectCount = selectCount +1;
//alert(selectCount);
var selcount = document.getElementById('selCount');
selcount.textContent = selectCount;
}
function fillsource(ivalue)
{
alert(ivalue);
}
</script>
<form name= "Search" id= "SearchForm" method= "post">
<select name= "SearchWhat" onchange = "setSearchField()">
<option value = "both"> Both Event and Task </option>
<option value = "event"> Event </option>
<option value = "task" > Task </option>
</select>
<label id="selCount"></label>
<input type="submit" value= "submit" name = "btn_submit"/>
<input type="button" name= "newsearch" value= "New Search" onClick= "addNewSearch()">
</html>
pouvez-vous fournir des données de test pour dropCatsJson et dropSourceJson? – forseta
@Barmar a résolu mon problème. Merci quand même. – sparksustc