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

在我的页面上有一个项目下拉列表（主要投诉）和一个弹出框（附加投诉）上的复选框列表，如上图所示

其他投诉的弹出复选框列表如下所示（我的列表中有更多项目，因此列表分为四列）：

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>

$(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;
          };

            });

主要投诉
一个
两个
三
四
五
六
七
八
附加投诉
一个


两个


三


四


五


六


七


八

JS代码

 <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>

$(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;
          };

            });

$（文档）.ready（函数（）{
$（“.inline”）.colorbox（{inline:true，不透明度：0.7，fixed:true，innerWidth:1100，innerHeight:550，滚动：false}）；
//用于存储复选框值的数组
checkValues=新数组（）；
document.getElementById（'update'）。onclick=function（）{
//捕获变量中的所有文本
var textStr=$（“
”）；
//迭代所有复选框值以创建ul
$.each（检查值、函数（索引、值）{
textStr.append（'
'+value+'
'）；
});
//添加文本
$（“#text”）.html（textStr）；
父项。$.colorbox.close（）；
返回false；
};
//为复选框添加更改处理程序
$（'input:checkbox[name=complaint]'）。更改（函数（）{
value=$（this.val（）；
如果（选中此项）
checkValues.push（值）；
其他的
{//按值删除
checkValues=$.grep（checkValues，函数（n，i）{
返回n！==值；
}); 
}
});    
document.getElementById（'cancel'）。onclick=function（）{
父项。$.colorbox.close（）；
返回false；
};
});

问题:

如果从主要投诉的下拉列表中选择了“一”项，则在附加投诉复选框列表中，“一”项应而不是如下所示。但空的空间也不应该存在

谁能告诉我，我如何使用Jquery/JS实现这一点

---

提前感谢。

我无法用fiddle开发模式窗口，但我已经编写了Javascript逻辑，希望您会发现它很有用，可以正常工作

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';
}

---

希望这对您有所帮助。

我无法用fiddle开发模式窗口，但我已经编写了Javascript逻辑，希望您会发现它很有用，可以正常工作

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

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';
}

希望这对您有所帮助。

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

一个
两个

将div添加到所有标签，并在单击复选框时应用css属性“display:none”，希望这能起作用

一个
两个

---

---

将div添加到所有标签，并在您单击复选框时应用css属性“display:none”希望这会起作用

您可以共享该代码段的小提琴吗？您已经很好地提出了这个问题，但是您的JS代码在哪里？您可以共享哪个函数打开弹出窗口？@Siddharth我无法创建小提琴。所以我有共享的代码。@Yo-Yo我有弹出窗口的JS代码（使用colorbox）和在页面上显示弹出项目的值。上面添加了很多JS代码。你能分享那段代码吗？你已经很好地提出了这个问题，但是你的JS代码在哪里？你能分享哪个函数打开弹出窗口？@Siddharth我无法创建fiddle。所以我有共享的代码。@Yo-Yo我有弹出窗口的JS代码（使用colorbox）和在页面上显示弹出项目的值。在上面添加了很多JS代码。我应用了你的代码，但在我的代码中却不起作用。而且复选框列表中的空白也应该消失。我们必须在JS代码中使用checkbox（投诉）的名称吗？听着，做一件事在加载模型窗口后调用我的函数我们正在通过

class

，稍后将在后端使用该名称。哦..我明白了..您也更改了HTML中的checkbox类。这正在起作用。但如果我们选择中间项，则会出现空白。您是否可以更新您的答案，以便下一项将占据已删除项在复选框列表中的位置？如果下拉项的值中有空格或其他字符，该怎么办？e、 g.

一个数字/两个数字

然后我必须这样做

解决方案是什么？我应用了你的代码，但在我的代码中不知怎么地不起作用。而且复选框列表中的空白也应该消失。我们必须在JS代码中使用复选框（投诉）的名称吗？听着，做一件事在加载模型窗口后调用我的函数我们正在通过

class

，名称将在以后/在后端使用。哦