Setare valori din array in select tag

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
dim
Mesaje: 61

Setare valori din array in select tag

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??

MarPlo Mesaje: 4343
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:

dim Mesaje: 61
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

MarPlo Mesaje: 4343
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>

dim Mesaje: 61
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

MarPlo Mesaje: 4343
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>

Subiecte similare