Forum

Cursuri online, tutoriale, jocuri si anime - gratuite
https://marplo.net/forum/

Setare valori din array in select tag

https://marplo.net/forum/viewtopic.php?f=34&t=3061

Pagina 1 din 1

Setare valori din array in select tag

Scris: Mar Apr 13, 2021
de dim
Salut am un array cu orele de functionare

Cod: Selectaţi tot

$data['times'] = array (
             '0400' => '04:00 AM',
             '0430' => '04:30 AM',
             '0500' => '05:00 AM',
             '0530' => '05:30 AM',
             '0600' => '06:00 AM',
             '0630' => '06:30 AM',
             '0700' => '07:00 AM',
             '0730' => '07:30 AM',
             '0800' => '08:00 AM',
             '0830' => '08:30 AM',
             '0900' => '09:00 AM',
             '1800' => '06:00 PM',
             '1830' => '06:30 PM',
             '1900' => '07:00 PM',
             '1930' => '07:30 PM',
             '2000' => '08:00 PM',
             '2030' => '08:30 PM',
             '2100' => '09:00 PM',
             '2130' => '09:30 PM',
             '2200' => '10:00 PM',
             '2230' => '10:30 PM',
             '2300' => '11:00 PM',
             '2330' => '11:30 PM',
);
si am doua butone de selectare ora de deschidere si ora de inchidere a programului

Cod: Selectaţi tot

<table class="table table-bordered table-hover">
                            <thead>
                                
                                <tr class="panel-heading">
                                    <td style="text-align: left">{{ text_day }}</td>
                                    <td style="text-align: left">{{ text_open }}</td>
                                    <td style="text-align: left">{{ text_close }}</td>
                                </tr>
                            </thead>
                            <tbody>
<tr>
                                    <td>
                                        <label class="col-sm-2 control-label" >{{zi_01}}</label>
                                    </td>
                                    <td>
                                      <label  for="input-open-luni{{location.location_id}}"></label>
                                      <select name="shipping_pickup_location_open_luni{{location.location_id}}" id="input-open-luni{{location.location_id}}" class="form-control">
			                                {% for cod,name in times %}
			            	                    {% if shipping_pickup_location_open_luni[location.location_id] == cod %}
			                  	                <option value="{{cod}}" selected="selected"> {{name}}</option>
			                                  {% else %}
			                   	                <option value="{{cod}}" >{{name}}</option>
			                                 	{% endif %}
			                              	{% endfor %}
			                                </select>          
                                    </td>
                                    <td>
                                       <label  for="input-close-luni{{location.location_id}}"></label>
                                       <select name="shipping_pickup_location_close_luni{{location.location_id}}" id="input-close-luni{{location.location_id}}" class="form-control">
                                       {% for cod,name in times %}
			            	                     {% if shipping_pickup_location_close_luni[location.location_id] == cod %}
			                  	                 <option value="{{cod}}" selected="selected"> {{name}}</option>
			                                   {% else %}
			                   	                 <option value="{{cod}}" >{{name}}</option>
			                                 	 {% endif %}
			                              	 {% endfor %}
			                                 </select>      
                                    </td>
                                </tr>
                  </tbody>
            </table>
pot sa fac in asa fel in cat sa fie ora de deschidere predefinita la 9:00AM si ora de inchidere la 6:30PM si in al doilea buton select ora pe care pot sa o aleg sa fie mai mare decat ora de deschidere??

Setare valori din array in select tag

Scris: Mie Apr 14, 2021
de MarPlo
Poti sa pui o anumita optiune predefinita selectata adaugand-o direct in codul html cu atributul "selected" (vezi in exemplu dat).
Ca sa nu se poata selecta o ora de inchidere mai mica decat cea de deschidere e nevoie de un script JS care sa compare cele doua ore.
Poti aa folosesti scripul din urmatorul exemplu.

Cod: Selectaţi tot

Open: <select id='s1'>
<option>07:00 am</option>
<option selected>09:00 am</option>
<option>11:00 am</option>
</select> - 
Close: <select id='s2'>
<option>07:30 am</option>
<option>08:00 am</option>
<option selected>06:30 pm</option>
<option>08:00 pm</option>
</select>
<div id='err_msg'></div>
<script>
var err_msg = document.getElementById('err_msg');
var sl_s1 = document.getElementById('s1');
var sl_s2 = document.getElementById('s2');
var i_sel2 = sl_s2.selectedIndex;  //index of selected option

//return a number H.m of pased hour
var hourToNr =(h)=>{
  let arn=h.trim().replace(' ',':').split(':');
  if(arn[2].toLowerCase()=='pm') arn[0] = arn[0]*1+12;
  return (arn[0]+'.'+arn[1])*1;
}

sl_s2.addEventListener('change', (e)=>{
  let s1_val = hourToNr(sl_s1.options[sl_s1.selectedIndex].text); //pass text of selected option
  let s2_val = hourToNr(e.target.options[e.target.selectedIndex].text);
  if(s1_val >= s2_val){
    sl_s2.selectedIndex = i_sel2; //select default selected option
    err_msg.innerHTML ='Invalid close hour';
  }
  else err_msg.innerHTML ='';
});
</script>
Demo:
Open: - Close:

Setare valori din array in select tag

Scris: Mie Apr 14, 2021
de dim
Multumesc pt raspuns
intrebarea erea daca pot sa priau datale din acel array si sa fac selectarea predefinita daca il pun asa cum ai zis tu in codul html cu atributul "selected" tinand cont ca am 7 zile din saptamana progam diferit este destul de lung codu html si ma gandeam ca il pot simlifica, in loc de:

Cod: Selectaţi tot

Open: <select>
<option>00:30 am</option>
...
<option>07:00 am</option>
<option>07:30 am</option>
<option>08:00 am</option>
<option>08:30 am</option>
<option selected>09:00 am</option>
....
<option>11:00 am</option>
....
</select>
pot sa preiau datele din array si am daor cateva lini sa le afisez

Cod: Selectaţi tot

<select name="shipping_pickup_location_open_luni{{location.location_id}}" id="input-open-luni{{location.location_id}}" class="form-control">
			                                {% for cod,name in times %}
			            	                    {% if shipping_pickup_location_open_luni[location.location_id] == cod %}
			                  	                <option value="{{cod}}" selected="selected"> {{name}}</option>
			                                  {% else %}
			                   	                <option value="{{cod}}" >{{name}}</option>
			                                 	{% endif %}
			                              	{% endfor %}
			                                </select>
daor ca nu stiu cum pot in cazul asta sa predefinesc "selected" sau daca este posibil.

Iar scriptul as vrea sa scata din array orele mai mica ca cea selectata in select open si sa o afiseze in select close estul orelor ramase nu sa intaorca eroare daca s-ar putea
multumesc

Setare valori din array in select tag

Scris: Mie Apr 14, 2021
de MarPlo
Nu cunosc sintaxa acelui sistem template, dar poti incerca sa inlocuiesti:

Cod: Selectaţi tot

{% if shipping_pickup_location_open_luni[location.location_id] == cod %}
Cu (pentru Open):

Cod: Selectaţi tot

{% if name == 09:00 AM %}
Iar partea cu scriptul JS, functioneaza cel din urmatorul cod.
Sterge automat elementele <option> din select-ul Close care au ora mai mica decat optiunea selectata predefinit la Open.

Cod: Selectaţi tot

Open: <select id='s1'>
<option>07:00 am</option>
<option selected>09:00 am</option>
<option>11:00 am</option>
</select> - 
Close: <select id='s2'>
<option>07:30 am</option>
<option>08:00 am</option>
<option selected>06:30 pm</option>
<option>08:00 pm</option>
</select>
<script>
//return a number H.m of pased hour
var hourToNr =(h)=>{
  let arn=h.trim().replace(' ',':').split(':');
  if(arn[2].toLowerCase()=='pm') arn[0] = arn[0]*1+12;
  return (arn[0]+'.'+arn[1])*1;
}

var sl_s1 = document.getElementById('s1');
var sl_s2 = document.getElementById('s2');
let s1_val = hourToNr(sl_s1.options[sl_s1.selectedIndex].text); //pass text of selected option
var sl2_ops = sl_s2.querySelectorAll('option');
for(var i=0; i<sl2_ops.length; i++){
  var oph_val = hourToNr(sl2_ops[i].text);
  if(s1_val >= oph_val) sl2_ops[i].outerHTML ='';  //remove element
}
</script>

Re: Setare valori din array in select tag

Scris: Mie Apr 14, 2021
de dim
Am testat codul tau JS dar are efect doar daca dau refresh dupa fiecare selectare a primului buton pt a avea efect in al doilea

Setare valori din array in select tag

Scris: Mie Apr 14, 2021
de MarPlo
Testeaza urmatorul cod.
Daca ceva mai trebuie schimbat, incearca si tu sa modifici dupa cum stii, in functie de ce vrei sa obtii.

Cod: Selectaţi tot

Open: <select id='s1'>
<option>06:00 am</option>
<option>07:00 am</option>
<option selected>09:00 am</option>
</select> - 
Close: <select id='s2'>
<option>07:00 am</option>
<option>08:00 am</option>
<option selected>06:30 pm</option>
<option>08:00 pm</option>
</select>
<script>
//return a number H.m of pased hour
var hourToNr =(h)=>{
  let arn=h.trim().replace(' ',':').split(':');
  if(arn[2].toLowerCase()=='pm') arn[0] = arn[0]*1+12;
  return (arn[0]+'.'+arn[1])*1;
}

//show valid options
var sl1_chg =()=>{
  let s1_val = hourToNr(sl_s1.options[sl_s1.selectedIndex].text); //pass text of selected option
  var sl2_ops = sl_s2.querySelectorAll('option');
  for(var i=0; i<sl2_ops.length; i++){
    var oph_val = hourToNr(sl2_ops[i].text);
    sl2_ops[i].style.display ='none';
    if(s1_val < oph_val) sl2_ops[i].style.display ='inline';
  }
}

var sl_s1 = document.getElementById('s1');
var sl_s2 = document.getElementById('s2');
sl_s1.addEventListener('change', sl1_chg);
sl1_chg();
</script>
Ora este UTC+03:00 UTC+3
Pagina 1 din 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/