Как отключить уже выбранные элементы в раскрывающемся списке

Question

У меня есть недельный график. когда я пытаюсь выбрать уже выбранный элемент, он будет отключен. В моей форме я ищу изменить будничные дни. Если понедельник выбран, он не может быть выбран снова.

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

Хорошо, прежде всего, для СУХИХ, не повторяйте себя. Легкий способ построения вашего выбора - это массив и цикл. Как правило, она будет принимать эту форму

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

Тогда вы можете пойти

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

Разве это не намного лучше, глядя

, заселившие это во многом проблема Javascript так с JQuery вы хотели бы сделайте что-нибудь вроде этого:

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); 

     } 
     }); 
}); 

Теперь вам нужно будет найти способ отключить но это должно указывать на вас в правильном направлении. Вероятно, вы могли бы создать объект для хранения значений, а затем, когда они изменили, посмотрите на это значение и на disable,false.

Как это

var selected = { 
     "select_71" : "Monday" //Id : value 
    } 

И ниже этого

$(this).find('option[value="'+current_value+'"]').prop('disabled', true); 

Добавить

if(selected.current){ 
    $(this).find('option[value="'+selected.current+'"]').prop('disabled', false); 
    } 

и за ее пределами (после) каждый дополнительный цикл:

selected.current = current_value; 

На стороне примечание Идея, которая возникает у меня, почему у вас есть выбор, почему бы просто не иметь блоки с флажком и временным диапазоном, при этом флажок выбирает день. Тогда нет необходимости беспокоиться об этом, и порядок исправлен.

четверг 8/20/2015 [] выберите

[_ время начала ] до [ времени окончания _]

пятницу 8/21/2015 [] выберите

[_ время начала ] до [ время окончания]

etc ...

Answer 2

Вы пытаетесь выбрать несколько элементов в раскрывающемся списке, но вы не указали выпадающему, что разрешено несколько вариантов. Я думаю, что это запутанные вещи

На ваш <select..> добавить атрибут multiple как так

<select multiple 
     class="right" 
     data-placeholder="select your category" 
     id="select_7<?echo $i?>" 
     data-rel="chosen" 
     name="day<?echo $i;?>" >