显示复选框项目列表(选定的下拉项目除外)

基兰

我有一个下拉列表项和一个弹出框(用于打开弹出框的颜色框)和一个复选框列表。单击“ +添加/编辑”显示弹出窗口下拉菜单项和复选框都是通过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>

题:

  1. 如果选择主要投诉项,则该投诉不会出现在“其他投诉”列表中(即,如果将“主要投诉”选择为“投诉类型1”,则“投诉类型1”不会显示在“其他投诉”列表中)

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?

  1. There is empty space generating if we remove the element. I don't want the empty space of removed item in checkbox list. Empty space means if 'complaint type 2' is removed then there empty space creates between 'complaint type 1' and 'complaint type 3'.

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?

Nadeem Manzoor
  1. In your code, make sure the select dropdown value is $line_of_text[0] e.g. 1, 2, 3 etc.
  2. 现在添加onChange="hideSpaceAndComplain(this.value)"选择元素。
  3. 原样复制以下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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章