as the title say
I have a problem with removing or disable select option tree multiselect patosai. Actually the disable or remove is working but the display not re-render.
any idea? here jsfiddle
<input id="checkedTree" type="text"/>
<select id="test-select">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
<button id="dis" onclick = "disableSelect()">
Remove apple and avocado
</button>
$( document ).ready(function() {
var $select = $('#test-select');
$select.treeMultiselect({
enableSelectAll: true,
sortable: false,
searchable: true,
startCollapse: true,
onChange:function(){
if ($select.val() != null){
document.getElementById("checkedTree").value = $select.val();
}else{
document.getElementById("checkedTree").value = "";
}
}
});
});
function disableSelect(){
document.getElementById("test-select").remove(2);
document.getElementById("test-select").remove(2);
//document.getElementById("checkedTree").value = "success";
}
the proof its working, the value that i get when checked those apple and avocado is null...
Btw, is there any way to make 2 select using patosai tree multiselect on same page? How?
That library actually changes the HTML structure of your select box. You have provided this
<select id="test-select">
<option value="1" data-section="fruit">Banana</option>
<option value="2" data-section="fruit">Apple</option>
<option value="3" data-section="fruit">Avocado</option>
<option value="4" data-section="fruit">Pineapple</option>
<option value="5" data-section="fruit">PenPineappleApplePen</option>
<option value="6" data-section="animal">Tiger</option>
<option value="7" data-section="animal">Lion</option>
<option value="8" data-section="animal">Pitbull</option>
<option value="9" data-section="animal">OrangUtan</option>
<option value="10" data-section="animal">Marsupilami Yellow cartoon</option>
</select>
But when using patosai's plugin, it becomes as here below
<div class="section" data-key="0">
<div class="title"><span class="collapse-section">-</span>
<input class="section" type="checkbox">fruit</div>
<div class="item" data-key="0" data-value="1">
<input class="option" type="checkbox" id="treemultiselect-0-0">
<label for="treemultiselect-0-0">Banana</label>
</div>
<div class="item" data-key="3" data-value="4">
<input class="option" type="checkbox" id="treemultiselect-0-3">
<label for="treemultiselect-0-3">Pineapple</label>
</div>
<div class="item" data-key="4" data-value="5">
<input class="option" type="checkbox" id="treemultiselect-0-4">
<label for="treemultiselect-0-4">PenPineappleApplePen</label>
</div>
</div>
<div class="section" data-key="1">
<div class="title"><span class="collapse-section">-</span>
<input class="section" type="checkbox">animal</div>
<div class="item" data-key="5" data-value="6">
<input class="option" type="checkbox" id="treemultiselect-0-5">
<label for="treemultiselect-0-5">Tiger</label>
</div>
<div class="item" data-key="6" data-value="7">
<input class="option" type="checkbox" id="treemultiselect-0-6">
<label for="treemultiselect-0-6">Lion</label>
</div>
<div class="item" data-key="7" data-value="8">
<input class="option" type="checkbox" id="treemultiselect-0-7">
<label for="treemultiselect-0-7">Pitbull</label>
</div>
<div class="item" data-key="8" data-value="9">
<input class="option" type="checkbox" id="treemultiselect-0-8">
<label for="treemultiselect-0-8">OrangUtan</label>
</div>
<div class="item" data-key="9" data-value="10">
<input class="option" type="checkbox" id="treemultiselect-0-9">
<label for="treemultiselect-0-9">Marsupilami Yellow cartoon</label>
</div>
</div>
Which means that you have to select your elements differently. I have inspected the document and what you need is the following;
function disableSelect() {
$('.item[data-value="2"]').remove(); // removes apple
$('.item[data-value="3"]').remove(); // removes avocado
}
To remove those two elements. Here is an updated fiddle to check it yourself: https://jsfiddle.net/htumxL5r/1/
Related
So my 4 dropdowns are as follow:
<select class="form-dropdown field" name="employee_id" id="employee_id" required="">
<option value=""> Select Employee ID *</option>
<option value="23137">Sydney Ross ( 23137 )</option>
<option value="E00474">Andy Sandberg ( E00474 )</option>
</select>
<!-- <input type="text" id="employee_id" name="employee_id" placeholder="Employee ID" class="field text-field last-name-field" required style="border: 1px solid #ccc;"> -->
<span id="span_month" title="">
<div id="list1" class="dropdown-check-list" tabindex="1" style="">
<div class="custom-dropdown">
<span class="anchor" onclick="getElements(list1)">Select Months</span>
<div class="options">
<ul id="list1_items" class="items visible" name="month" style="display: block;"><li><input type="checkbox" name="month" value="4" id="4"><label for="4">Apr</label></li><li><input type="checkbox" name="month" value="5" id="5"><label for="5">May</label></li><li><input type="checkbox" name="month" value="6" id="6"><label for="6">Jun</label></li></ul>
</div>
</div>
</div>
</span>
<span id="span_quarter" title="">
<div id="list2" class="dropdown-check-list" tabindex="100" style="">
<div class="custom-dropdown">
<span class="anchor" onclick="getElements(list2)">Select Quarter</span>
<div class="options">
<ul id="list2_items" class="items visible" name="quarter" style="display: none;"><li><input type="checkbox" name="quarter" value="1" id="1" disabled=""><label for="1"> Apr - Jun (Quarter 1)</label></li></ul>
</div>
</div>
</div>
</span>
<span id="span_year">
<select class="form-dropdown field" name="year" id="list3_items" required="">
<option value=""> Select Year *</option>
<option value="2021"> 2021-2022 </option>
</select>
</span>
So when I click the outside of the dropdown it should auto close.
$('html').click(function() {
$('#list1_items').hide();
});
$('#list1').click(function(event) {
e.stopPropagation();
$('#list2_items').hide();
// $('#list3_items').hide();
});
$('html').click(function() {
$('#list2_items').hide();
});
$('#list2').click(function(event) {
event.stopPropagation();
$('#list1_items').hide();
// $('#list3_items').hide();
});
I tried this solution but it is working perfectly fine on Windows but not on linux machine, I know javascript is done by browser and has no effect of the OS, but this is the issue I am facing, I tried a lot of solutions but nothing is working.
Please if someone can help me.
It is showing like this:
the image
Thankyou.
I have two select option categories. The first One Strong Subjects and second one is Weak Subject.
All options are same in both category. What i want is after selecting the strong subject, the selected option get removed from weak subject category.
function strongsubjects(){
var str = document.querySelector(".strong input");
str.style.display="none";
}
<div class="strong">
<input type="checkbox" onclick="strongsubjects()" value="1">1
<input type="checkbox" onclick="strongsubjects()" value="2">2
<input type="checkbox" onclick="strongsubjects()" value="3">3
</div>
<div class="weak">
<input type="checkbox" onclick="weaksubjects()" value="1">1
<input type="checkbox" onclick="weaksubjects()" value="2">2
<input type="checkbox" onclick="weaksubjects()" value="3">3
</div>
This is what you want I think
function strongsubjects(obj){
if(obj.checked){
document.querySelector(`[data-week-val="${obj.value}"]`).style.display="none";
}
else{
document.querySelector(`[data-week-val="${obj.value}"]`).style.display="block";
}
}
function weaksubjects(obj){
if(obj.checked){
document.querySelector(`[data-strong-val="${obj.value}"]`).style.display="none";
}
else{
document.querySelector(`[data-strong-val="${obj.value}"]`).style.display="block";
}
}
<div class="strong" style="width:50%;float:left">
Strong
<div data-strong-val="1">
<input type="checkbox" onclick="strongsubjects(this)" value="1">1
</div>
<div data-strong-val="2">
<input type="checkbox" onclick="strongsubjects(this)" value="2">2
</div>
<div data-strong-val="3">
<input type="checkbox" onclick="strongsubjects(this)" value="3">3
</div>
</div>
<div class="weak" width="50%" style="width:50%;float:left">
Week
<div data-week-val="1">
<input type="checkbox" onclick="weaksubjects(this)" value="1">1
</div>
<div data-week-val="2">
<input type="checkbox" onclick="weaksubjects(this)" value="2">2
</div>
<div data-week-val="3">
<input type="checkbox" data-week-val="3" onclick="weaksubjects(this)" value="3">3
</div>
</div>
I hope this is what you're looking for. The below code loops through all the checked checkboxes in each .weak and .strong divs, and hides the corresponding checkbox in the other div.
Before hiding the divs, all the previously hidden checkboxes are shown temporarily (in the 1st 2 lines of the function)
function filterOptions(){
$(".strong input[type='checkbox']").show();
$(".weak input[type='checkbox']").show();
$(".strong input[type='checkbox']:checked").each( function(){
$(".weak input[data-subject='" + $(this).attr("data-subject") + "']").hide()
})
$(".weak input[type='checkbox']:checked").each( function(){
$(".strong input[data-subject='" + $(this).attr("data-subject") + "']").hide()
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strong">
<input type="checkbox" onclick="filterOptions()" data-subject="1">1
<input type="checkbox" onclick="filterOptions()" data-subject="2">2
<input type="checkbox" onclick="filterOptions()" data-subject="3">3
</div>
<div class="weak">
<input type="checkbox" onclick="filterOptions()" data-subject="1">1
<input type="checkbox" onclick="filterOptions()" data-subject="2">2
<input type="checkbox" onclick="filterOptions()" data-subject="3">3
</div>
I have assumed that the values are sorted as showed in the image. You could reverese the logic for weaksubjects function.
function strongsubjects(){
const weakSubject = document.querySelectorAll(".weak input");
const strongSubject = document.querySelectorAll(".strong input").forEach((el,index) => {
if (el.checked) {
weakSubject[index].parentElement.style.display= 'none';
} else {
weakSubject[index].parentElement.style.display= 'block';
}
});
}
<div class="strong">
<div><input type="checkbox" onclick="strongsubjects()" value="1">1</div>
<div><input type="checkbox" onclick="strongsubjects()" value="2">2</div>
<div><input type="checkbox" onclick="strongsubjects()" value="3">3</div>
</div>
<div class="weak">
<div><input type="checkbox" onclick="weaksubjects()" value="1">1</div>
<div><input type="checkbox" onclick="weaksubjects()" value="2">2</div>
<div><input type="checkbox" onclick="weaksubjects()" value="3">3</div>
</div>
I want to create a Select checkbox list under the Select Checkbox dropdown again. What do I have to do?
Sample i need
☑ C 1 : name
☐ C 1.1 : name
☑ C 1.2 : name
☐ C2 : name
☐ C3 : name
My code
form views
<label>Standard List</label>
<select type="button"id="framework" name="framework[]" multiple class="form-control" >
<option class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
Js :
$(document).ready(function(){
$('#framework').multiselect({
nonSelectedText: 'Choose...',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth:'400px'
});
});
Not using JQuery:
(Just DOM)
HTML:
<!--------C1------------>
<input type="checkbox" id="c1" onclick="check()">
<label>C 1</label><br>
<div id="c1-hidden" style="display:none">
<input type="checkbox" id="c1" onclick="check()">
<label>C 1.1</label><br>
<input type="checkbox" id="c1" onclick="check()">
<label>C 1.2</label>
</div>
<!--------C2------------->
<input type="checkbox" id="c2" onclick="check()">
<label>C 2</label><br>
<div id="c2-hidden" style="display:none">
<input type="checkbox" id="c1" onclick="check()">
<label>C 2.1</label><br>
<input type="checkbox" id="c1" onclick="check()">
<label>C 2.2</label>
</div>
<!--------C3------------->
<input type="checkbox" id="c3" onclick="check()">
<label>C 3</label>
<div id="c3-hidden" style="display:none">
<input type="checkbox" id="c1" onclick="check()">
<label>C 3.1</label><br>
<input type="checkbox" id="c1" onclick="check()">
<label>C 3.2</label>
</div>
Javascript:
<script>
var checkboxes = ["c1","c2","c3"];
function check(){
checkboxes.forEach(item=>{
if(document.getElementById(item).checked==true){
document.getElementById(item+"-hidden").style.display = "block";
}else{
document.getElementById(item+"-hidden").style.display = "none";
}
});
}
</script>
Hope this helps :)
On my page there is a dropdown list of items (Main Complaint) and a checkbox list on a popup (Additional Complaint) as shown in above image.
The popup checkbox list of Additional Complaint is like below (There are more items in my list so list is in four 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 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 code
$(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;
};
});
Question:
If the 'One' item is selected from the dropdown list of Main Complaint, then in the Additional Complaint checkbox list that 'One' item should not appear like below. But the empty space also should not be there.
Can anyone please tell me, how do I get that working using Jquery/JS?
Thanks in advance.
I could not develop a modal window in fiddle but i have written Javascript logic, hope you will find it 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 i change your onchange function to this->
onchange="selectAnswer(this)"
Hoping this helps you.
<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>
add div to all labels and apply the css property "display:none" when you click the checkbox hope this will work
I have a form where users would be able to select the number of adults attending an event. Once this value is selected I would like a section to appear the has meal selection values for the number of adults chosen. IE, user selects 2 adults, Adult Meal 1 select appears, Adult Meal 2 select Appears. All I have right now are the form fields. I have researched and have seen that fields can be added dynamically, but I haven't figured out how to accomplish what I am trying to accomplish. Can anyone help?
<!DOCTYPE html>
<html lang="en-US">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14 /angular.min.js"></script>
</head>
<body>
<form name="oitrsvp">
<div ng-app="">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Email Address : </b><input type="email" ng-model="email" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="model.numad" ng-change="addFields(model.numad)" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="model.numch" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</body>
</html>
UPDATE:
So I figured how to do this via JavaScript. I have divs set up to initially hide, but once a value in the dropdown in selected it shows that div. The problem I'm facing now is that I have two different drop downs that need to have this fnctionality, one for adults and one for children. When I select a number for the adults, the correct selects appear. Then when I go to the next dropdown for the children, the correct number of selects appear there too, but the selects for the adults go away. How cna I get them both to stay?
<!DOCTYPE html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var currentlyShown = null;
function selectAdMeal(value){
//alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='am_' + value;
// alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
function selectChMeal(value){
alert(value);
if(currentlyShown){
currentlyShown.style.display = 'none';
}
var elem='ch_' + value;
alert(elem);
currentlyShown = document.getElementById(elem);
if(currentlyShown){
currentlyShown.style.display = '';
}
}
</script>
</head>
<body>
<div ng-app="">
<form name="oitrsvp">
<p><b>First Name : </b><input type="text" ng-model="fname" required></p>
<p><b>Last Name : </b><input type="text" ng-model="lname" required></p>
<p><b>Georgia Tech Email Address : </b><input type="email" ng-model="gtemail" required></p>
<label><b>How many parking passes will you need (for non-GT employees)?<b></label><br>
<select ng-model="model.ppass" convert-to-number>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<h1>Hello {{fname}} {{lname}} {{model.ppass}}</h1>
<br>
<label><b>Please Select your meal time :</b></label><br>
<input type="radio" ng-model="mealtime" value="1">
11:30am
<br/>
<input type="radio" ng-model="mealtime" value="2">
12:30pm
<br/>
<br>
<label><b>How many adults will be attending with you?</b></label><br>
<select ng-model="numad" id='numad' onchange="selectAdMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="am_0" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
</div>
<div id="am_1" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
</div>
<div id="am_2" style="display:none;">
Please select the meal for yourself:<br>
<input type="radio" ng-model="selfmeal" value="p">
Pork<br>
<input type="radio" ng-model="selfmeal" value="c">
Chicken<br>
<input type="radio" ng-model="selfmeal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 1:<br>
<input type="radio" ng-model="ad1meal" value="p">
Pork<br>
<input type="radio" ng-model="ad1meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Adult 2:<br>
<input type="radio" ng-model="ad2meal" value="p">
Pork<br>
<input type="radio" ng-model="ad2meal" value="c">
Chicken<br>
<input type="radio" ng-model="ad2meal" value="v">
Vegetarian
<br><br>
</div>
<label><b>How many children will be attending with you?</b></label><br>
<select ng-model="numch" id='numch' onchange="selectChMeal(this.options[this.selectedIndex].value);" convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br><br>
<div id="ch_0" style="display:none;">
</div>
<div id="ch_1" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
</div>
<div id="ch_2" style="display:none;">
Please select the meal for Child 1:<br>
<input type="radio" ng-model="ch1meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch1meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch1meal" value="v">
Vegetarian
<br><br>
Please select the meal for Child 2:<br>
<input type="radio" ng-model="ch2meal" value="hd">
Hot Dog<br>
<input type="radio" ng-model="ch2meal" value="h">
Hamburger<br>
<input type="radio" ng-model="ch2meal" value="v">
Vegetarian
<br><br>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
</form>
</div>
</body>
</html>
In AngularJs you have ng-show attribute, You can set the appearance of an element according to variable in the scope:
<body ng-app="myApp">
<div ng-controller="myctrl">
<form name="oitrsvp">
<select ng-model="numad" id='numad' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="am_0" ng-show="numad=='0'">am_0</div>
<div id="am_1" ng-show="numad=='1'">am_1</div>
<div id="am_2" ng-show="numad=='2'">am_2</div>
<select ng-model="numch" id='numch' convert-to-number required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="ch_0" ng-show="numch=='0'">
ch_0
</div>
<div id="ch_1" ng-show="numch=='1'">
ch_1
</div>
<div id="ch_2" ng-show="numch=='2'">
ch_2
</div>
</form>
</div>
var myApp = angular.module('myApp',[]);
myApp.controller("myctrl",function(){
});