我有一个项目的下拉列表和一个弹出窗口(用于打开弹出窗口的使用的颜色框)和一个复选框列表.点击“添加/编辑”显示弹出窗口.这两个下拉项目和复选框都是通过一个compl.csv文件在
PHP中生成的.
的投诉档案
1,complaint type 1 2,complaint type 2 3,complaint type 3 etc...
<label class="question-name" ng-class="{error:hasError()}">
<span class="ng-binding" ng-hide="question.nameHiddenOnMobile">
Chief Complaint
</span>
<span class="icon-required" ng-show="question.required"></span>
</label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer"
ng-model="question.response.value"
ng-options="a.text as a.getText() for a in question.answers.items"
id="Language.PrimarySpoken" ng-value="a.text" class="input-wide"
ng-class="{error:hasError()}">
<option class="hidden" disabled="disabled" value=""></option>
<?PHP
$file_handle = fopen("../complaint.csv","r");
while (!feof($file_handle)) {
$lines_of_text[] = fgetcsv($file_handle,1024);
}
fclose($file_handle);
foreach ( $lines_of_text as $line_of_text):
?>
<option value="<?PHP print $line_of_text[1]; ?>">
<?PHP print $line_of_text[1]; ?></option>
<?PHP endforeach; ?>
</select>
<br/> <br/>
<label class="question-name" ng-class="{error:hasError()}">
<span class="ng-binding" ng-hide="question.nameHiddenOnMobile">
Additional Complaint
</span>
<span class="icon-required" ng-show="question.required"></span>
</label>
<div class="form-row added ng-binding" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding"
ng-bind-html="question.getText()">
<em><a class='inline' href="#inline_content">+ Add/Edit</a></em>
</div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<?PHP
// Setup ---------------------------------------------------------------
define('numcols',4); // set the number of columns here
$csv = array_map('str_getcsv',file('../complaint.csv'));
$numcsv = count($csv);
$linespercol = floor($numcsv / numcols);
$remainder = ($numcsv % numcols);
// Setup ---------------------------------------------------------------
// The n-column table --------------------------------------------------
echo '<div class="table">'.PHP_EOL;
echo ' <div class="column">'.PHP_EOL;
$lines = 0;
$lpc = $linespercol;
if ($remainder>0) { $lpc++; $remainder--; }
foreach($csv as $item) {
$lines++;
if ($lines>$lpc) {
echo ' </div>' . PHP_EOL . '<div class="column">'.PHP_EOL;
$lines = 1;
$lpc = $linespercol;
if ($remainder>0) { $lpc++; $remainder--; }
}
echo ' <label class="checkBox" for="checkBox'.$item[0].'" style="font-size:20px;">
<input type="checkBox" name="complaint" value="'.$item[1].'" id="checkBox'.$item[0].'" data-toggle="checkBox">'
.$item[1].
'</label><br />';
}
echo ' </div>'.PHP_EOL;
echo '</div>'.PHP_EOL;
// The n-column table --------------------------------------------------
?>
<br/>
<input type="submit" name="submit" id="update"
class="button button-orange"
style="width: 90px; margin-top: 450px; margin-left:-1062px;"
value="Update">
<input type="submit" name="cancel" id="cancel"
class="button button-orange"
style="width: 90px; background-color:#36606e;"
value="Cancel">
</form>
</div>
</div>
题：
>如果选择了主要投诉项目,那么同样的投诉不会出现在“其他投诉”列表中(即如果为主投诉选择了“投诉类型1”,“投诉类型1”不会显示在“其他投诉”列表中)
如何使用一个complaint.csv文件,如检查所选项目,并在显示列表时避免它,例如选择“投诉类型1”,来自complaint.csv文件的数据将显示在弹出窗口复选框列表中,除了“投诉类型1“被选中？
>如果我们删除元素,则产生空白空间.我不想在复选框列表中删除项目的空白空间.空的空间意味着如果“投诉类型2”被删除,那么在“投诉类型1”和“投诉类型3”之间创建空白空间.
有没有办法让AJAX在这种情况下,比如当选择项目时,AJAX会调用它,它将从选中的复选框列表中删除该项目,然后加载除所选项目之外的新项目列表. (现在两个列表都是在页面加载的同时加载的,使用AJAX的下拉列表应该加载在页面加载和复选框列表上,点击“添加/编辑”按钮,避免选择的项目.)因此可能是空的空间不在那里
应该如何使用AJAX？
要么
解决方法
>在您的代码中,确保选择下拉列表值为$line_of_text [0],例如1,2,3等
>现在在select元素上添加onChange =“hideSpaceAndComplain(this.value)”.
>复制以下javascript函数
>现在在select元素上添加onChange =“hideSpaceAndComplain(this.value)”.
>复制以下javascript函数
function hideSpaceAndComplain(id){
//Hide selected one
$("#popup_form").find('label').show();
//Hide selected one
$('input[value=' + id + ']').parents('label').hide();
//Now rearrange all the visible label in columns
var visibleLabels = $("#popup_form").find('label:visible');
visibleLabels.each(function(i,v){
var column = Math.floor(i/4); // 4 being the number of column
$(this).appendTo($("#popup_form").find('.column:eq('+column+')'));
});
}
这样做既隐藏所选择的元素,然后在列中重新排列标签,以除去一个额外的空间.
