10510 sujets

JavaScript, DOM et API Web HTML5

Bonjour, j'ai un petit problème pour optimiser mon JS. Voici le contexte : j'ai une page de mon site qui permet d'affecter des ressources à des métiers. Pour plus de simplicité j'ai créé un bouton "ajouter la ressource " qui ajoute une case en "readonly" avec l'id de la ressource. Cela permet d'ajouter plusieurs ressource en même temps. Le problème est le suivant : Je n'arrive pas à trouver le moyen de remplacer l'affichage de la "value" de ma nouvelle case.

Voici le code (il y a toute la page):


<html>
	<head>
		<title>Ajout de Ressource </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>


	<script>		
		selectionR = function (){
				//le code JS en question 
				console.log('coucou', $('#ressource').find('option:selected'));
				$('#ressource').find('option:selected').each(function(){
				if (!document.getElementById('r_'+ $(this).val()+'')) { $('#ma_selection').append('<input id="r_'+ $(this).val()+'" name="r_'+ $(this).val()+'" value="'+ $(this).val() + '" readonly><br>'); }
				alert($(this).val());
				});
			}
	</script>
	</head>
<form method="POST" action="index.php?uc=ajoutR&action=ressource">
<body>

<br>
<label>Metier</label>
	<select name='metier' id='metier'>
		<?php
			foreach( $lesMetiers as $unMetier){ 
				$num = $unMetier['code_metier'];
				$nom = $unMetier['nom_metier'];?>
				<option value="<?php echo $num ?>"><?php echo $nom ?></option>
				<?php
				}
				?></select>
<br><br><br>
<label>Service</label>
	<select name='service' id='service'>
		<?php	
			foreach( $lesServices as $unService){ 
				$num = $unService['code_service'];
				$nom = $unService['nom_service'];?>
				<option value="<?php echo $num ?>"><?php echo $nom ?></option>
				<?php
				}
				?></select>
<br><br><br>		
<label>Ressource</label><br>
<select name='ressource' id='ressource'>
		<?php				
				foreach( $lesRessources as $uneRessource){ 
				$num = $uneRessource['id_Res'];
				$nom = $uneRessource['nom_Res'];?>
				<option value="<?php echo $num ?>"><?php echo $nom ?></option>
				<?php
				}
				?>
//bouton qui permet d'ajouter la ressource
		<input type="button" value="ajouter la ressource" onclick="selectionR()">
			</select>
		<p id="ma_selection"></p>
		
	<input type="submit" value="Valider" name="valider">
    <input type="reset" value="Annuler" name="annuler">
			
		
</body>
</html>


Si il y a des idées je suis preneur ^^
Modifié par Tardoss (21 May 2019 - 00:58)
Salut,

Je ne sais pas si on pourra t'aider, mais en l'état ce n'est pas super pratique ton code Smiley ohwell
Il y a du code PHP dedans qui doit générer des listes d'options qui n'ont sans doute pas de rapport avec ton problème javascript mais que l'on doit s’embêter à générer a la main avant d'envisager de t'aider Smiley sweatdrop

Cela serait plus simple si on pouvoir avoir directement le code html de la page post traitement php Smiley ravi

Ensuite je ne comprends pas bien ... pourquoi ne pas juste faire un select multiple ?
Voir même de s'orienter du coté des select2 (vu que tu utilises du jquery)