Apelare automata functii cu valori din select-uri

[sterica]

Salutare,

Am urmatoarele selecturi si js:

Cod: Selectaţi tot

<select id="frm_nume_chest1" onchange="fetch_select(this.id, 'higtchart_medie_gen');">
  <option value="1"> test 1</option>
  <option value="2"> test 2</option>
</select>

<select id="frm_intrebare" onchange="fetch_select_2('frm_nume_chest1', this.id, 'higtchart_medie_intrebare');">
  <option value="1"> intr 1</option>
  <option value="2"> intr 2</option>
</select>

<script>
  //selectie automata a inputurilor la deschiderea fisierului in browser
  var sel_inputuri = document.getElementById('frm_nume_chest').value;
  fetch_select(frm_nume_chest, 'higtchart_medie_gen');
  </script>

Codul js este o adaptare (care nu functioneaza) dupa un cod lasat pe forum de MarPlo.
Cu codul js incerc sa selecteze automat valorile din select-uri la deschiderea paginii in browser si de asemenea cand valoarea din primul select id="frm_nume_chest1" este schimbata sa se faca un refresh si pentru select-ul 2 id="frm_intrebare" dar fara a schimba valoarea acestuia.

Multumesc!

Salut
Cand un cod JavaScript nu functioneaza, prima miscare e sa verifici in consola eventuale erori js. Te poate ajuta sa stii unde sa corectezi.
La ceea ce vrei sa faci, vezi daca iti e de folos codul din acest exemplu:

Cod: Selectaţi tot

Sel 1: <select id="frm_nume_chest">
  <option value="t1"> test 1</option>
  <option value="t2"> test 2</option>
</select> 
Sel 2: <select id="frm_intrebare">
  <option value="int1"> intr 1</option>
  <option value="int2"> intr 2</option>
</select>
<div id="higtchart_medie_gen">higtchart_medie_gen</div>
<hr>
<div id="higtchart_medie_intrebare">higtchart_medie_intrebare</div>

<script>
//function called when #frm_nume_chest is changed
//sel1=the 1st <select> element; dv=<div> where to add response
function fetch_select(sel1, dv){
  var val_s1 = sel1.value;
  dv.innerHTML ='Value: '+ val_s1; //show the value in div
  fetch_select_2(sel1, frm_intrebare, higtchart_medie_intrebare); //call fetch_select_2() with necesary arguments
}

//function called when #frm_intrebare is changed
//sel1=the 1st <select> (#frm_nume_chest); sel2=the 2nd <select>; dv=<div> where to add response
function fetch_select_2(sel1, sel2, dv){
  var val_s1 = sel1.value;
  var val_s2 = sel2.value;
  dv.innerHTML ='Value sel1: '+ val_s1 +'<br>Value sel2: '+ val_s2; //show the values of sel1, sel2 in div
}

//get the <select>s
var frm_nume_chest = document.getElementById('frm_nume_chest');
var frm_intrebare = document.getElementById('frm_intrebare');

//get the <div>s
var higtchart_medie_gen = document.getElementById('higtchart_medie_gen');
var higtchart_medie_intrebare = document.getElementById('higtchart_medie_intrebare');

//register %change event to <select>s
frm_nume_chest.addEventListener('change', function(ev){
  fetch_select(ev.target, higtchart_medie_gen); //call fetch_select() width necessary arguments
});
frm_intrebare.addEventListener('change', function(ev){
  fetch_select_2(frm_nume_chest, ev.target, higtchart_medie_intrebare); //call fetch_select_2() width necessary arguments
});

//call fetch_select() when page loads
fetch_select(frm_nume_chest, higtchart_medie_gen);
</script>

- Demo:

Sel 1: test 1 test 2 Sel 2: intr 1 intr 2

higtchart_medie_gen

---

higtchart_medie_intrebare

ma chinui de azi dimineata sa implementez scriptul tau in codul meu si nu reusesc sa il aduc la liman.
Codul meu se afla in head, cand aplic codul propus de tine, imi rescrie functiile fetch_select si fetch_select_2 ?

Cod: Selectaţi tot

function fetch_select(id_sel, id_show){
    val_frm_nume_chest = $('#'+ id_sel).val();
    $.ajax({
        type: 'POST',
        url: 'include/get_db.inc.php',
        data: {
            frm_nume_chest: val_frm_nume_chest,
            nf: 'f1'
        },
        success: function (response) {
            document.getElementById(id_show).innerHTML=response;
            columnChart( JSON.parse(response));
        }
    });
}

// id_sel1=id of first select item, id_sel=id of onchange selected item, id_show=id of element for response
function fetch_select_2(id_sel1, id_sel, id_show){
  val_frm_nume_chest = $('#'+ id_sel1).val();
  val_frm_intrebare = $('#'+ id_sel).val();
  $.ajax({
    type: 'POST',
    url: 'include/get_db.inc.php',
    data: {
      frm_nume_chest: val_frm_nume_chest,
      frm_intrebare: val_frm_intrebare,
      nf: 'f2'
    },
    success: function (response) {
      document.getElementById(id_show).innerHTML=response;
      columnChart2( JSON.parse(response));
     }
  });
}
... functie cu chart

Ca sa inteleg codul mult mai bine, am incercat ceva mult mai simplu: la sfarsitul codului meu sa fac o apelare a celor doua functii fetch_select si fetch_select_2, ca la deschiderea paginii web sa imi incarce valorile in cele doua div-uri higtchart_medie_gen si higtchart_medie_intrebare in care sunt afisate doua grafice.
Am incercat in felul urmator:

Cod: Selectaţi tot

var sel1 = document.getElementById('frm_nume_chest').value;
var sel2 = document.getElementById('frm_intrebare').value;
var div1 = document.getElementById('higtchart_medie_gen');
var div2 = document.getElementById('higtchart_medie_intrebare');

fetch_select (sel1, div1);
fetch_select_2 (sel2, div2);

Insa in consola primesc: Uncaught TypeError: Cannot read property 'value' of null at ...

Multumesc!

Functia fetch_select_2() e definita cu 3 parametri, deci la apelare se transmit acelasi numar de valori, corespunzator fiecarui parametru [ fetch_select_2(sel1, sel2, div2); ].
In rest, mai simplu de exemplele date (care si functioneaza cu Demo) nu stiu sa explic.
Daca nu poti sa intelegi logica codului facut si sa-l adaptezi la ce ai, depinde de experienta si masura de intelegere a fiecaruia.

ma tot chinui sa adaptez codul prezentat de MarPlo la codul meu insa fara rezultat, nu stiu nici macar cum sa imi dau seama de posibile erori, ce este cert, aceste doua linii de cod imi returneaza valorile dorite

Cod: Selectaţi tot

dv.innerHTML ='Value: '+ val_s1; //show the value in div
// si:
dv.innerHTML ='Value sel1: '+ val_s1 +'<br>Value sel2: '+ val_s2; //show the values of sel1, sel2 in div