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 :)
Related
This has definitely been covered before and im sure it will again but none of the examples ive found are helping me.
I have 4 radiobuttons and when r1 radiobutton is selected i want to display only Item1 that is otherwise hidden.
When r2 radiobutton is selected i want to display only Item1 Item2 and Item3 that is otherwise hidden.
When r3 radiobutton is selected i want to display only Item2 and Item3 and Item4 that is otherwise hidden.
main.php
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="row">
<div id='frm' class="w50">
<form action="" method="post" >
<div>
<h1><u>Test</u></h1>
<span class="error"><?php echo isset($errors['DB']) ? $errors['DB'] : '';?></span>
</div>
<div>
<label>Date:</label>
<input id="date" type="date" name="date" <?php if(!empty($errors)) echo "value='" . $_POST["date"] . "'";?> />
<br><span class="error"><?php echo isset($errors['date']) ? $errors['date'] : '';?></span>
</div>
<div>
<label>Room:</label><br>
<input id="r1" type="radio" name="room" value="r1" <?php if(!empty($errors) && $_POST["room"] == 'r1') echo "checked='checked'";?> /> <label for="r1">rm1</label>
<input id="r2" type="radio" name="room" value="r2" <?php if(!empty($errors) && $_POST["room"] == 'r2') echo "checked='checked'";?> /> <label for="r2">rm2</label>
<input id="r3" type="radio" name="room" value="r3" <?php if(!empty($errors) && $_POST["room"] == 'r3') echo "checked='checked'";?> /> <label for="r3">rm3</label>
<input id="r4" type="radio" name="room" value="14a" <?php if(!empty($errors) && $_POST["room"] == 'r4') echo "checked='checked'";?> /> <label for="r4">rm4</label>
<br>
<span class="error"><?php echo isset($errors['room']) ? $errors['room'] : '';?></span>
</div>
<div>
<select id="tablnk" name="tab">
<option value="" data-tab="0">Choose...</option>
<option value="Item1" data-tab="1">Item1</option>
<option value="Item2" data-tab="2">Item2</option>
<option value="Item3" data-tab="3">Item3</option>
<option value="Item4" data-tab="4">Item4</option>
</select>
</div>
<div class="tab_content">
<div id="tab1" class="tab_content_block">
<input type="checkbox" id="ch1" name="ch[]" value="val1" data-ch="1"><label for="ch1">val1</label><br>
<input type="checkbox" id="ch2" name="ch[]" value="val2" data-ch="2"><label for="ch2">val2</label>
<input type="checkbox" id="ch3" name="ch[]" value="val3" data-ch="3"><label for="ch3">val3</label>
<input type="checkbox" id="ch4" name="ch[]" value="val4" data-ch="4"><label for="ch4">val4</label>
</div>
<div id="tab2" class="tab_content_block">
<input type="checkbox" id="ch5" name="ch[]" value="val1" data-ch="5"><label for="ch5">val1</label><br>
<input type="checkbox" id="ch6" name="ch[]" value="val2" data-ch="6"><label for="ch6">val2</label>
<input type="checkbox" id="ch7" name="ch[]" value="val3" data-ch="7"><label for="ch7">val3</label>
<input type="checkbox" id="ch8" name="ch[]" value="val4" data-ch="8"><label for="ch8">val4</label>
</div>
<div id="tab3" class="tab_content_block">
<input type="checkbox" id="ch9" name="ch[]" value="val1" data-ch="9"><label for="ch9">val1</label><br>
<input type="checkbox" id="ch10" name="ch[]" value="val2" data-ch="10"><label for="ch10">val2</label>
<input type="checkbox" id="ch11" name="ch[]" value="val3" data-ch="11"><label for="ch11">val3</label>
<input type="checkbox" id="ch12" name="ch[]" value="val4" data-ch="12"><label for="ch12">val4</label>
</div>
</div>
<div>
<input type="submit" id="submit" value="Submit">
</div>
</form>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
script.js
$(function(){
// tabs
$('#tablnk').on('change', function (e) {
let key = $('#tablnk option:selected').data('tab');
$('.tab_content').fadeOut(400, function(){
$('.tab_content_block').hide(100, function(){
$('.tab_content_block input:checkbox').prop('checked', false);
$('.tab_content_block input:checkbox').removeAttr('disabled');
$('#tab'+key).show();
});
}).fadeIn();
});
});
Here i want to do while onclick the button i want to uncheck the fields,and i am using data list , in that datalist suppose i selected Marathahalli means except marathahalli remaining all values i want to make uncheck, i tried but here all values are unchecking, how to do if anyone knows means please update my snippet
$('.options').on('change', function() {
var locality = $('#options option[value="' + $('#areaName').val() + '"]').data('id');
$('#locality_id').val(locality);
}).change();
$("#search1").click(function(){
var localityId = $("#locality_id").val();
if(localityId != ''){
$('.myCheckbox').attr('checked', false); // Unchecks it
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input list="options" type="name" class="form-control options" style="height: 34px; width: 100%;border-radius:0px;" name="areaName" id="areaName" placeholder="Locality" rel="" value="">
<datalist id="options">
<option data-id="1" value="Marathahalli"></option>
<option data-id="2" value="Silk Board"></option>
<option data-id="3" value="Jaya Nagar"></option>
<option data-id="5" value="Kadubeesanahalli"></option>
<option data-id="6" value="Bellandur"></option>
<option data-id="7" value="Kundalahalli"></option>
<option data-id="8" value="JP nagar"></option>
</datalist>
<input type="hidden" name="localityId" id="locality_id" value="">
<button id="search1" type="button">Click Me!</button>
<form id="filterForm">
<ul style="padding-left: 0px;">
<li><label class="space"><input type="checkbox" name="localityId" value="1" checked="" onclick="myFunction()" class="myCheckbox">Marathahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="2" checked="" onclick="myFunction()" class="myCheckbox">Silk Board</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="3" checked="" onclick="myFunction()" class="myCheckbox">Jaya Nagar</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="5" checked="" onclick="myFunction()" class="myCheckbox">Kadubeesanahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="6" checked="" onclick="myFunction()" class="myCheckbox">Bellandur</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="7" checked="" onclick="myFunction()" class="myCheckbox">Kundalahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="8" checked="" onclick="myFunction()" class="myCheckbox">JP nagar</label></li>
</ul>
</form>
This is happening because you are explicitly marking all of them as unchecked and not filtering them. Modified you code.
$('.options').on('change', function() {
var locality = $('#options option[value="' + $('#areaName').val() + '"]').data('id');
$('#locality_id').val(locality);
}).change();
$("#search1").click(function(){
var localityId = $("#locality_id").val();
if(localityId != ''){
$('.myCheckbox').each(function () {
if (localityId === $(this).val()) {
$(this).attr('checked', true);
} else {
$(this).attr('checked', false);
}
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input list="options" type="name" class="form-control options" style="height: 34px; width: 100%;border-radius:0px;" name="areaName" id="areaName" placeholder="Locality" rel="" value="">
<datalist id="options">
<option data-id="1" value="Marathahalli"></option>
<option data-id="2" value="Silk Board"></option>
<option data-id="3" value="Jaya Nagar"></option>
<option data-id="5" value="Kadubeesanahalli"></option>
<option data-id="6" value="Bellandur"></option>
<option data-id="7" value="Kundalahalli"></option>
<option data-id="8" value="JP nagar"></option>
</datalist>
<input type="hidden" name="localityId" id="locality_id" value="">
<button id="search1" type="button">Click Me!</button>
<form id="filterForm">
<ul style="padding-left: 0px;">
<li><label class="space"><input type="checkbox" name="localityId" value="1" checked="" onclick="myFunction()" class="myCheckbox">Marathahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="2" checked="" onclick="myFunction()" class="myCheckbox">Silk Board</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="3" checked="" onclick="myFunction()" class="myCheckbox">Jaya Nagar</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="5" checked="" onclick="myFunction()" class="myCheckbox">Kadubeesanahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="6" checked="" onclick="myFunction()" class="myCheckbox">Bellandur</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="7" checked="" onclick="myFunction()" class="myCheckbox">Kundalahalli</label></li>
<li><label class="space"><input type="checkbox" name="localityId" value="8" checked="" onclick="myFunction()" class="myCheckbox">JP nagar</label></li>
</ul>
</form>
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/
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(){
});