How to disable already selected items in the dropdown list - php

Question

I have a week schedule. when I am trying to select the already selected item it will get disabled. In my form I am looking to edit the weekdays. If monday is selected then it can't be selected again.
<?
$i=1;
foreach($shop_timing->result() as $name)
{?>
<br>
<input type="hidden" id="shop_time_id" name="time<?echo $i;?>" value="<?echo $name->shop_time_id;?>">
<select class="right" data-placeholder="select your category" id="select_7<?echo $i?>" data-rel="chosen" name="day<?echo $i;?>" >
<option <?php if($name->working_day=="Monday"){?> selected="selected" <?}?> >Monday</option>
<option <?php if($name->working_day=="Tuesday"){?> selected="selected" <?}?>>Tuesday</option>
<option <?php if($name->working_day=="Wednesday"){?> selected="selected" <?}?>>Wednesday</option>
<option <?php if($name->working_day=="Thursday"){?> selected="selected" <?}?>>Thursday</option>
<option <?php if($name->working_day=="Friday"){?> selected="selected" <?}?>>Friday</option>
<option <?php if($name->working_day=="Saturday"){?> selected="selected" <?}?>>Saturday</option>
<option <?php if($name->working_day=="Sunday"){?> selected="selected" <?}?>>Sunday</option>
-->
</select>
<div class="bootstrap-timepicker">
<div class="input-group">
<input type="text" class="timepicker starttime" value="<?echo $name->working_start_time?>" name="timefrom<?echo $i;?>" id="timefrom" placeholder="time"/>
</div>
</div>
<div class="bootstrap-timepicker">
<div class="input-group">
<input type="text" class="timepicker end" value="<?echo $name->working_end_time?>" name="endtime<?echo $i;?>" id="endtime" placeholder="time"/>
</div>
</div>
<? $i++; } ?>
<input type="hidden" id="count" name="count" value="<?echo $count;?>">
<?
for($j=1;$j<=(7-$count);$j++)
{?>
<select class="right" data-placeholder="select your category" id="select_7<?echo $i?>" data-rel="chosen" name="day<?echo $i;?>">
<option disabled="disabled" selected="selected">Day</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
<div class="bootstrap-timepicker">
<div class="input-group">
<input type="text" class="timepicker starttime" name="timefrom<?echo $i;?>" id="starttime3" placeholder="time"/>
</div>
</div>
<div class="bootstrap-timepicker">
<div class="input-group">
<input type="text" class="timepicker end" name="endtime<?echo $i;?>" id="endtime3" placeholder="time"/>
</div>
</div>
<? $i++; } ?>

Answer 1

You are trying to select multiple items in a dropdown but you have not told the dropdown that multiple selection is allowed. I think this is confusing things
On your <select..> add the multiple attribute like so
<select multiple
class="right"
data-placeholder="select your category"
id="select_7<?echo $i?>"
data-rel="chosen"
name="day<?echo $i;?>" >

Answer 2

Well first of all for the purpose of DRY, don't repeat yourself. The easy way to build your select is with an array and a loop . Typically it would take this form
<?php
function printOptions( $selected_value )
$days = array(
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday"
);
foreach( $days as $day ){
if($selected_value == $day ){
$selected = ' selected="selected"';
}else{
$selected = '';
}
echo '<option value="'.$day.'"'.$selected.' >'.$day.'</option>'
}
}
?>
Then you can go
<select class="right day_selection" data-placeholder="select your category" id="select_7<?echo $i?>" data-rel="chosen" name="day<?echo $i;?>" >
<?php printOptions( $name->working_day ) ?>
</select>
Isn't that much nicer looking
That settled this is largely a javascript problem so with jquery you would want to do something like this:
var selectors = $('day_selection'); //cache select elments
$('.day_selection').change( function(){
var current = $(this).prop('id');
var current_value = $(this).val();
$.each( selectors, function(i,v){
if($(this).prop('id') != current ){
$(this).find('option[value="'+current_value+'"]').prop('disabled', true );
}
});
});
now you will have to find a way to un-disable them but that should point you in the right direction. Likely you could make an object to store the values in and then when they change look up that value and disable,false them.
Like this
var selected = {
"select_71" : "Monday" //Id : value
}
And below this
$(this).find('option[value="'+current_value+'"]').prop('disabled', true );
Add
if( selected.current ){
$(this).find('option[value="'+selected.current+'"]').prop('disabled', false );
}
And outside ( after ) the each loop add:
selected.current = current_value;
On a side note an Idea that occurs to me is why have the selects at all, why not just have blocks with a checkbox and the time range, checking the checkbox selects the day. Then there is no need to worry about it and the order is fixed.
Thursday 8/20/2015 [ ] select
[_ start time ] to [ end time _]
Friday 8/21/2015 [ ] select
[_ start time ] to [ end time _]
etc...