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

您尝试在下拉列表中选择多个项目，但尚未告知下拉列表允许多项选择。我认为这是令人困惑的事情

在multiple上添加<select multiple class="right" data-placeholder="select your category" id="select_7<?echo $i?>" data-rel="chosen" name="day<?echo $i;?>" >属性，如此

passwordEncoder.matches("rawPassword", user.getPassword()),

Answer 2

首先，为了DRY的目的，不要重复自己。构建选择的简单方法是使用数组和循环。通常它会采用这种形式

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

另一方面，我想到的一个想法是为什么要选择，为什么不只是有一个复选框和时间范围的块，选中复选框选择日期。然后就不用担心了，订单也是固定的。

2015年8月8日星期四 []选择

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

2015年8月21日星期五 []选择

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

等...

如何禁用下拉列表中已选择的项目

2 个答案: