Отобразить список элементов флажка, кроме выбранного выпадающего элемента

У меня есть раскрывающийся список элементов и всплывающее окно (используемое colorbox для открытия всплывающего окна) со списком флажков. Всплывающее окно отображается при нажатии кнопки "+ Добавить/Редактировать". Как выпадающие элементы, так и флажки генерируются в 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" не отображается в списке дополнительных жалоб)

Как я могу получить это, используя один файл complaint.csv, например, проверку выбранного элемента и избежать его при отображении списка, например, при выборе типа жалобы 1, данные из файла complaint.csv будут отображаться во всплывающем флажке список, за исключением "тип жалобы 1" , который выбран?

  1. Генерируется пустое пространство, если мы удалим элемент. Я не хочу, чтобы пустое пространство удаляемого элемента в списке флажков. Пустое пространство означает, что если "тип жалобы 2" удаляется, тогда создается пустое пространство между "типом жалобы 1" и "типом жалобы 3".

Есть ли способ иметь AJAX для этой ситуации, например, когда элемент выбран AJAX будет вызывать, и он удалит элемент из выбранного списка флажков, а затем загрузит список новых элементов, кроме выбранного, (в настоящий момент оба списка загружаются одновременно с загрузкой страницы с помощью AJAX раскрывающийся список должен загружаться на странице загрузки и флажок в кнопке "+ Добавить/редактировать", избегая выбранного элемента.) Таким образом, может быть пустого пространства там не будет.

Как это сделать с помощью AJAX?

ИЛИ

Кто-нибудь может предложить любое решение с PHP или JS для получения обоих требований?

Ответ 1

  • В вашем коде убедитесь, что выпадающее значение выбора $line_of_text[0], например. 1, 2, 3 и т.д.
  • Теперь добавьте onChange="hideSpaceAndComplain(this.value)" в элемент select.
  • Скопируйте следующую функцию 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+')'));
       });
    }
    

Это делает как скрытие выбранного элемента, так и повторное размещение меток в столбце, чтобы удалить лишнее пространство.

Ответ 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();

Вы можете увидеть рабочий пример в этот JSFiddle. Надеюсь, это поможет.

Обратите внимание, что я вижу в вашем коде, что вы используете Angular, поэтому вы можете использовать это вместо этого. Но я не уверен, почему вы генерируете опции select как с Angular, так и с PHP, поэтому я предполагаю, что это какой-то скопированный код, который вы не используете.