[AJAX][JavaScript][HTML] Dynamiczne tworzenie listy select + input wraz z pętlą mysql. Opcje

[Giluś]

Hej, posiadam taki kod:

[PHP] pobierz, plaintext 
<?php
echo '<select name="opcja">';
$wynik2 = mysql_query("SELECT * FROM opcje") or die('Błąd zapytania'); 
while($r2 = mysql_fetch_assoc($wynik2)) { 
echo '<option value="'.$r2['id'].'">'.$r2['nazwa'].' / '.$r2['limit3'].' / '.$r2['limit2'].'</option>';
}
echo '
</select>
<br />
 
Opcja 1:<br /> 
<input type="text" name="o1" value=""/><br />
 
Opcja 2:<br /> 
<input type="text" name="o2" value=""/><br />
<p id="usun">Usuń</p>
[PHP] pobierz, plaintext 

I teraz chciałbym dynamicznie tworzyć w nieskończoność takie pola (czyli: Select/Opcja1/Opcja2 i guzik do usuwania wybranego "pola")
Po naciśnięciu jakiegoś guzika tworzyły by się automatycznie takie pola, później chciałbym obrabiać to w PHP..

Dodam jeszcze, że zapytanie do MySQL w każdym "polu" jest identyczne, oraz skrypt nie musi być jakoś mega optymalny, bo jest to do zastosowań domowych wiec nie będzie on narażony na miliony zapytań (IMG:style_emoticons/default/smile.gif)

Nie potrafię ogarnąć jak tworzyć ten SELECT i później uzupełnić go w option'y które pochodzą z MySQL'a..

Może Wy mi coś pomoże ?

*użyte słowo "pole" oznacza cały fragment tego wyżej kodu.


Pozdrawiam i z góry dziękuje za pomoc (IMG:style_emoticons/default/smile.gif)

[Giluś]

Hej, dzięki bardzo za pomoc z opisaniem jak to mniej więcej zrobić, lecz mam pewien problem, ale najpierw mój kod:

[JAVASCRIPT] pobierz, plaintext 
 
 $(document).ready(function() {
 
z = 0;
var url="ajax.php";
 
 
  $("#klik").click(function(){
 
var myDiv = document.getElementById("myDiv");
 
 
var selectList = document.createElement("select");
selectList.setAttribute("id", "mySelect");
selectList.setAttribute('name', 'op['+(z++)+'][id]');
myDiv.appendChild(selectList);
 
for (var i = 0; i < 1; i++) {
	$.getJSON(url,function(data){
		$.each(data.op, function(i,op){
			var option = document.createElement("option");
				option.setAttribute("value", op.id);
				option.text = ""+op.nazwa+" / "+op.limit3+" / "+op.limit2+"";
				selectList.appendChild(option);
 
		});
	});
}
 
var br = document.createElement("br");
myDiv.appendChild(br);
 
var input = document.createElement('input');
	input.setAttribute('name', 'op['+(z++)+'][opcja1]');
	myDiv.appendChild(input);
 
var br = document.createElement("br");
myDiv.appendChild(br);
 
var input2 = document.createElement('input');
	input2.setAttribute('name', 'op['+(z++)+'][opcja2]');
	myDiv.appendChild(input2);
 
 
var br = document.createElement("br");
myDiv.appendChild(br);
var br = document.createElement("br");
myDiv.appendChild(br);
 
 
 
});	
 
}); 
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
<form action="" method="post"> 
<div id="myDiv"></div><br />
<input type="button" value="Dodaj" id="klik"> 
<input type="submit" value="Guzik." /> 
</form>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
<?php
ob_start();
require_once('sql.php');
 
$var = array();
 
$wynik2 = mysql_query("SELECT * FROM opcje") or die('Błąd zapytania'); 
while($obj = mysql_fetch_object($wynik2)) {
	$var[] = $obj;
}
echo '{"op":'.json_encode($var).'}';
 
 
 
ob_end_flush();
?>
[PHP] pobierz, plaintext 

Prawie wszystko działa jak należy..
- Nie wiem jak zrobić usunięcie danego wiersza..
- Oraz nie wiem jak zrobić aby ta moja lista select miała takie samo "z" - id jak i 2 poniżej inputy..

Kod

Edit:
Chociaż wstępnie chyba wiem, jak to zrobić:

Pod:
"var myDiv = document.getElementById("myDiv");"
Dodać:
"u = z++;"

I później wszystkie "z++" pozamieniać na "u"..

I chyba powinno być dobrze co nie ?

Tak wiec pozostałby jedynie jeden problem z usunięciem danego wiersza :)

I to chyba wszystko co nie wiem jak zrobić, może mi podpowiecie, ew. coś poprawicie..


Pozdrawiam i z góry bardzo dziękuje za pomoc (IMG:style_emoticons/default/smile.gif)

Ten post edytował Giluś 12.08.2014, 17:48:39