如何禁用下拉列表中已选定的项目 - How to disable already selected items in the dropdown list

我有一个星期的时间表。当我试图选择已经选择的项目，它会被禁用。在我的形式，我希望编辑工作日。如果星期一被选中，那么它不能再被选中。

<?
$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++; } ?>

您正在尝试在下拉菜单中选择多个项目，但您没有告诉下拉菜单允许多个选择。我认为这是令人困惑的事情

在<select..>上添加multiple属性，如下所示

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

首先，为了DRY的目的，不要重复自己。构建select的简单方法是使用数组和循环。通常是这样的

<?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 [] select

[_起始时间]到[结束时间_]

周五8/21/2015

[ ] 选择

[_起始时间]到[结束时间_]

等等…