隐藏或删除在下拉列表中选择后在颜色框弹出窗口上的复选框


hide or remove checkbox which is on colorbox popup after selected in dropdown

我有下拉列表和复选框弹出窗口(colorbox popup)列表,其中数据来自complaint.csv文件。

投诉.csv文件

1,complaint type 1
2,complaint type 2
3,complaint type 3
etc...
当从

下拉列表中选择项目时,我想从弹出的复选框列表中隐藏/删除复选框。 例如,如果从下拉列表中选择了"投诉类型 1",则应从复选框列表中删除/隐藏"投诉类型 1"。

下面是一些代码。

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()}"  onchange="changeEventHandler(event);">
  <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>

JS代码

<script type="text/javascript">
    function changeEventHandler(event) {
        $('.inline').colorbox({onLoad: function() {
            //  alert('You have ' + event.target.value + ' complaint.');
            $('input[type=checkbox][value=' + event.target.value + ']').parent().hide();
        }});
    }
</script>

在上面的JS代码中,我从下拉列表中(注释的alert行)中获取了所选值alert但是具有该选定值的复选框项并未以某种方式删除。(对于这一行$('input[type=checkbox][value=' + event.target.value + ']').parent().hide();,我只是在弹出窗口中加载图标)

谁能告诉我我应该怎么做?

注意:我正在从 php 中的下拉列表和复选框弹出列表的投诉.csv文件中读取数据,如上面的代码所示。

进行以下更改并检查

$('input[type=checkbox][value="' + event.target.value+ '"]').parent().hide();