Newsgroup: it.comp.lang.javascript
Titolo: select aggiungere opzione ma visibile nel sorgente html

da php ho alla fine una pagina il cui codice sorgente html è:
<select id="f2" >
<option value="" selected="selected">Seleziona</option>
<option value="1">n1</option>
<option value="2">n2</option>
<option value="3">n3</option>
</select>
con js e jquery
riesco ad aggiungere altre opzioni e vedo questo nella select
Option A
n2
n3
Option B
Option C
Option D
ma il codice sorgente della pagina html rimane come quello inziale;
il problema è che sicocme la selct si trova dentro una form d'invio dati,
gli stessi non sono inviati
codice per inserire le nuove 4 opzioni
1)
var var_sel= document.getElementById("f2");
var_sel.options[1]=new Option("Option A", "A"); 
2)
var option = document.createElement("option");
	option.value = 'B';
	option.text = 'Option B'; 
	$('#f2').get(0)[$('#f2 option').length] = option;
3)
var myOption = $("<option value='C'>Option C</option>");
$("#f2").append(myOption);
4)
$('<option value="D">Option D</option>').appendTo("#f2").val();

 Option("Option A", "A");
Non ho capito: quale delle 3 usi? Tutte e tre? Sono tutti tentativi?
Per aggiungere una options puoi usare il metodo add:
 
https://developer.mozilla.org/en/DOM/HTMLSelectElement#add%28%29

 gli stessi non sono inviati
Questo perché la select non ha un attributo "name", ma solo l'id. Se
invii dati tramite submit di una form, vengono presi in considerazione
solo gli elementi che hanno un attributo name. È a prescindere da
JavaScript o jQuery.
-- 
"When you have eliminated the impossible, whatever remains, however
improbable, must be the truth."

 JavaScript o jQuery.
azz non l'avevo notato!

 JavaScript o jQuery.
il name c'è; avevo semplificato infatti i i valori che carica di default 
n1
n2
n3
li invia;
il problema è in quelli aggiunti;
Chiarimento sulle soluzioni adottate:
In genere tra le soluzioni che ho provato + quella suggerita quale è
preferibile usare? (es cross browser compatibile o altro )
5)suggerimento da post
var sel = document.getElementById("f2");
var opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";
sel.add(opt, sel.options[2]);
altre provate


  
https://developer.mozilla.org/en/DOM/HTMLSelectElement#add%28%29
ho provato anche questa ma idem
si puo' fare qualche verifica particoalre tipo capire se alla form in quale
punto non arriva etc?
o anche come va scritto il file .js dove inserire il codice
ho provato con
$(document).ready( function() {
});

 quale punto non arriva etc?
fai un alert delle options dopo averle aggiunte
Comunque sia la cosa è strana, visto che è una operazione semplice e 
usuale. Forse è meglio se posti un file di esempio completo e non 
funzionante, così lo testiamo.
browser / versione con cui testi? La console firefox non dice nulla, vero?

 codice per inserire le nuove 4 opzioni 
[CUT]
Testati tutti e 4, senza entrare nel merito della compatibilità mi 
risultano tutti e 4 funzionanti (firefox 5.0 ubuntu). Ecco il sorgente 
testato:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
http://www.w3.org/TR/
xhtml11/DTD/xhtml11.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it">	
<head>
<title>Test select</title>
<script type="text/javascript" src="
http://code.jquery.com/jquery-
latest.min.js">
 	//ultima versione jquery
</script>
<script type="text/javascript">//<![CDATA[
function add1() {
	var var_sel= document.getElementById("f2"); 
	var_sel.options[1]=new Option("Option A", "A");
} //add1
function add2() {
	var option = document.createElement("option");
	option.value = 'B';
	option.text = 'Option B';
	$('#f2').get(0)[$('#f2 option').length] = option;
}
function add3() {
	var myOption = $("<option value='C'>Option C</option>");
	$("#f2").append(myOption);
}
function add4() {
	$('<option value="D">Option D</option>').appendTo("#f2").val();
}
//]]>
</script>
</head>
<body>
<div><form method="get" action="test.htm">
<div><select id="f2" name="f2">
<option value="" selected="selected">Seleziona</option> 
<option value="1">n1</option>
<option value="2">n2</option>
<option value="3">n3</option>
</select></div>
<div><button type="button" onclick="add1()">Aggiungi option, metodo 1 
(sostituisce la seconda option)</button>&nbsp;
<button type="button" onclick="add2()">Aggiungi option, metodo 2 (accoda 
la option in fondo)</button>&nbsp;
<button type="button" onclick="add3()">Aggiungi option, metodo 3 (accoda 
la option in fondo)</button>&nbsp;
<button type="button" onclick="add4()">Aggiungi option, metodo 3 (accoda 
la option in fondo)</button>
<br/><button type="submit">submit</button></div>
</form></div>
</body>
</html>

ringraxzio per la verifica;
solo un dubbio:
la form di invio ha:
accept-charset="UTF-8" 
method="post" 
enctype="multipart/form-data">
non vorrei che le opzioni caricate dal suo codice sono utf compatibili e/o
rispettano le indicazioni della form;
mentre quelli inseriti con js invece no, anche se si tratta di semplice
testo; forse si deve aggiungere qualche funzione a js?



no; comunque sia, al massimo invierà qualche carattere strano, di certo 
non è che ignora la select ...
Se comunque vuoi esserne certo ti basta toglierlo un attimo e convertire 
post in get, così escludi la eventuale parte server-side e vedi se la sta 
inviando.

 inviando.
con firebug sotto a Net> HTML
ho quando funziona sia il POST miaform che il GET risultato
tutto funziona ho pagina invio e pagina risultato
quando non funziona ho solo il POST perchè
riamne nella stessa pagina visto che non riesce a salvare;
le differenze sul POST sono:
qundo funziona ho in piu' 2 righe
Location	
http://localhost/site/risultato
Content-Length	4
mentre quando non funziona ho solo
Transfer-Encoding	chunked
pero' nel  content-Disposition: form-data; name="f2"
ho il valore dell'opzione scelta in entrambi i casi
credo quindi che i dati lui li invia e che ci sia qualche problema a
livello di php 

 livello di php
Sembrerebbe di sì ...