on page there dropdown list of items (main complaint) , checkbox list on popup (additional complaint) shown in above image.
the popup checkbox list of additional complaint below (there more items in list list in 4 columns):
html code
<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 a.gettext() 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"> 1 </label> <br/> <label class="checkbox" for="checkbox2" style="font-size:20px;"> <input type="checkbox" name="complaint" value="two" id="checkbox2" data-toggle="checkbox"> 2 </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"> 3 </label> <br/> <label class="checkbox" for="checkbox4" style="font-size:20px;"> <input type="checkbox" name="complaint" value="four" id="checkbox4" data-toggle="checkbox"> 4 </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"> 5 </label> <br/> <label class="checkbox" for="checkbox6" style="font-size:20px;"> <input type="checkbox" name="complaint" value="six" id="checkbox6" data-toggle="checkbox"> 6 </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"> 7 </label> <br/> <label class="checkbox" for="checkbox8" style="font-size:20px;"> <input type="checkbox" name="complaint" value="eight" id="checkbox8" data-toggle="checkbox"> 8 </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 code
$(document).ready(function(){ $(".inline").colorbox({inline:true,opacity:0.7, fixed:true, innerwidth:1100, innerheight:550, scrolling:false}); //array store checkbox values checkvalues = new array(); document.getelementbyid('update').onclick = function(){ //capture text in variable var textstr = $('<ul></ul>'); //iterate checkbox values 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 checkbox $('input:checkbox[name=complaint]').change(function(){ value = $(this).val(); if(this.checked) checkvalues.push(value); else { //removing value checkvalues = $.grep(checkvalues, function(n, i) { return n !== value; }); } }); document.getelementbyid('cancel').onclick = function(){ parent.$.colorbox.close(); return false; }; }); question:
if 'one' item selected dropdown list of main complaint, in additional complaint checkbox list 'one' item should not appear below. empty space should not there.
can please tell me, how working using jquery/js?
thanks in advance.
i not develop modal window in fiddle have written javascript logic, hope find helpful, working 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'; } while change onchange function this->
onchange="selectanswer(this)" hoping helps you.
Comments
Post a Comment