Question

我有一个项目的下拉列表和一个弹出窗口（用于打开弹出窗口的颜色框），带有一个复选框列表。单击'+添加/编辑'即会显示弹出窗口。下拉项和复选框都是在PHP中从complaint.csv文件生成的。

complaint.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”不会显示在附加投诉清单上）

我应该如何使用一个complaint.csv文件来检查所选项目，并在显示列表时避免使用它，例如选择“投诉类型1”，来自complaint.csv文件的数据将是显示弹出复选框列表，但选择了“投诉类型1”？

如果删除元素，则会生成空格。我不希望复选框列表中已删除项目的空白空间。空白空间表示如果“投诉类型2”被删除，则“投诉类型1”和“投诉类型3”之间会出现空白区域。

有没有办法让AJAX适用于这种情况，例如选择项目时AJAX会调用它，它会从所选的复选框列表中删除该项目，然后加载新项目列表除了选定的一个。（现在两个列表都是在使用AJAX的页面加载时同时加载下拉列表应加载到页面加载和复选框列表上点击'+添加/编辑'按钮避免选择的项目。）因此可能是空的空间不会存在。

如何使用AJAX完成此操作？

OR

任何人都可以建议使用PHP或JS的任何解决方案来获得这两个要求吗？

Answer 1

在您的代码中，确保选择下拉值为$line_of_text[0]，例如1,2,3等。
现在在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+')'));
   });
}

这样做同时隐藏了所选的元素，然后在列中重新排列标签以删除一个额外的空格。

Answer 2

由于您描述的逻辑取决于用户在浏览器中执行的操作，您的功能必须在浏览器中完成，这意味着在Javascript中。

根据您使用JQuery的问题的标签，所以这里有一些关于如何使用JQuery的指针。首先，您必须将事件处理程序附加到下拉列表，以了解用户何时更改其值：

$('select').on('change', function() {
  //Put here what to do when the value of the dropdown changes.
}

在该功能中，您想要做两件事：

取消隐藏您之前隐藏的投诉
隐藏主要投诉

为此，请在事件处理程序中编写类似的内容：

//Un-hide everything
$('label').show();

//Hide selected one
$('input[value=' + $(this).val() + ']').parent().hide();

您可以在this JSFiddle中看到一个有效的例子。希望这会有所帮助。

请注意，我在您的代码中看到您使用了Angular，因此您可能希望使用它。但我不确定为什么你用Angular和PHP生成select选项两者，所以我假设这是一些你没有使用的复制粘贴代码。

显示除选定的下拉项

2 个答案: