我有一个下拉列表项和一个弹出框(用于打开弹出框的颜色框)和一个复选框列表。单击“ +添加/编辑”显示弹出窗口。下拉菜单项和复选框都是通过PHP从complaint.csv
文件中生成的。
投诉.csv文件
1,complaint type 1
2,complaint type 2
3,complaint type 3
etc...
PHP代码
<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>
题:
How should I get that using one complaint.csv
file like checking for the selected item, and avoid it when displaying the list e.g on select 'complaint type 1', the data from complaint.csv
file will be display on popup checkbox list except 'complaint type 1' which is selected?
Is there any way to have AJAX
for this situation like when the item is selected AJAX
will call and it will remove the item from the checkbox list which is selected and then load the new items list except the selected one. (right now both list are loading at a same time on page load insted of that using AJAX
the dropdown list should load on page load and checkbox list on click '+Add/Edit' button avoiding selected item.) Thus might be the empty space will not be there.
How this should be done using AJAX
?
OR
Can anyone please suggest any solution with PHP
or JS
to get both requirements?
$line_of_text[0]
e.g. 1, 2, 3 etc.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+')'));
});
}
这既隐藏了选定的元素,又重新排列了列中的标签以删除一个额外的空间。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句