javascript - 如何显示从下拉列表中选择的项目不应出现在复选框列表中

Question

在我的页面上有一个项目下拉列表(主要投诉)和弹出窗口上的复选框列表(其他投诉)，如上图所示。

附加投诉的弹出复选框列表如下(我的列表中有更多项目，因此列表分为四列):

HTML 代码

 <label class="question-name" ng-class="{error:hasError()}">  <span class="ng-binding" ng-hide="question.nameHiddenOnMobile">Main 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()}" ng-change="selectAnswer()">
   <option class="hidden" disabled="disabled" value=""></option>
        <option value="One">One</option>
        <option value="Two">Two</option>
        <option value="Three">Three</option>
        <option value="Four">Four</option>
        <option value="Five">Five</option> 
        <option value="Six">Six</option> 
        <option value="Seven">Seven</option> 
        <option value="Eight">Eight</option> 
</select>


 <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 content" 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">
    <div class="added">

        <div class="column-left">
                <label class="checkbox" for="checkbox1" style="font-size:20px;">
                <input type="checkbox" name="complaint" value="One" id="checkbox1" data-toggle="checkbox">
                One
                </label>
                <br/>
                <label class="checkbox" for="checkbox2" style="font-size:20px;">
                <input type="checkbox" name="complaint" value="Two" id="checkbox2" data-toggle="checkbox">
                Two
                </label>
                <br/>
        </div>

        <div class="column-center">
                <label class="checkbox" for="checkbox3" style="font-size:20px;">
                <input type="checkbox" name="complaint" value="Three" id="checkbox3" data-toggle="checkbox">
                Three
                </label>
                <br/>
                <label class="checkbox" for="checkbox4" style="font-size:20px;">
                <input type="checkbox" name="complaint" value="Four" id="checkbox4" data-toggle="checkbox">
                Four
                </label>
                <br/>
        </div>

        <div class="column-center-right">
            <label class="checkbox" for="checkbox5" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Five" id="checkbox5" data-toggle="checkbox">
            Five
            </label> 
            <br/>
            <label class="checkbox" for="checkbox6" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Six" id="checkbox6" data-toggle="checkbox">
            Six
            </label> 
            <br/>
        </div>

        <div class="column-right">
            <label class="checkbox" for="checkbox7" style="font-size:20px;">
            <input type="checkbox" name="complaint" value=" Seven" id="checkbox7" data-toggle="checkbox">
            Seven
            </label> 
            <br/>
            <label class="checkbox" for="checkbox8" style="font-size:20px;">
            <input type="checkbox" name="complaint" value="Eight" id="checkbox8" data-toggle="checkbox">
            Eight
            </label> 
            <br/>
        </div>

    </div> 
<br/>
<input type="submit" name="submit" id="update" class="button button-orange" style="width: 90px; margin-top: 450px;
margin-left: -533px;" 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代码

$(document).ready(function(){

                $(".inline").colorbox({inline:true,opacity:0.7, fixed:true, innerWidth:1100, innerHeight:550, scrolling:false});

  //array to store checkbox values
            checkValues = new Array();

            document.getElementById('update').onclick = function(){
                        //capture all text in a variable
                        var textStr = $('<ul></ul>');
                        //iterate all checkbox values to create ul
                        $.each(checkValues, function( index, value ){
                              textStr.append('<li>'+value+'</li>');
                        });
                        //add text
                        $("#text").html(textStr);
                        parent.$.colorbox.close();
                        return false;
            };

             //add change handler for checkbox        
           $('input:checkbox[name=complaint]').change(function(){
               value = $(this).val();
               if(this.checked)
                   checkValues.push(value);
               else
               {   //Removing by value
                  checkValues = $.grep(checkValues, function(n, i) { 
                      return n !== value;
                  }); 
               }
          });    

          document.getElementById('cancel').onclick = function(){
               parent.$.colorbox.close();
                        return false;
          };

            });

问题:

如果从主要投诉下拉列表中选择“一个”项目，则在其他投诉复选框列表中，“一个”项目不应出现 如下所示。但空白区域也不应该存在。

谁能告诉我，如何使用 Jquery/JS 使其工作？

提前致谢。

Answer 1

我无法在 fiddle 中开发模式窗口，但我已经编写了Javascript逻辑，希望你会发现它有帮助，工作fiddle

JavaScript

function selectAnswer(sel){   
    var a= document.querySelectorAll('label');
    console.log(this.value);
    for(i=0;i<a.length;i++){
     a[i].style.display='inline'


   }
    document.querySelectorAll('.checkbox'+sel.value)[0].style.display='none';
}

当我将你的 onchange 函数更改为此->

onchange="selectAnswer(this)"

希望这对您有帮助。