We Keep Coding

Show/hide dropdown based on another dropdown selection

When a user selects "Yes" for Menu1, I am trying to make Menu2 appear. When "Yes" is selected for Menu3, Menu4 should appear, etc. What am I missing or doing wrong? Thank you in advance!
$(function() {
$("#Menu2").hide();
$("#Menu3").hide();
$("#Menu4").hide();
$("#Menu5").hide();
$("#Menu6").hide();
$("#Menu1").change(function() {
if ($(this).val() == "Yes") {
$("#Menu2").show();
} else {
$("#Menu2").hide();
}
});
$("#Menu2").change(function() {
if ($(this).val() == "Yes") {
$("#Menu3").show();
} else {
$("#Menu3").hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row">
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name" id="Menu1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="Menu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Yes</option>
<option value="cat">No</option>
</select>
</div>
<div class="form-group col-md-4" id="Menu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Yes</option>
<option value="cat">No</option>
</select>
</div>

The problem was in the naming and also in the structure of your jQuery
$(document).ready(function(){
$("#menu2").hide();
$("#menu3").hide();
});
$(document).on('change',"#select1", function () {
if ($(this).val() == "Yes") {
$("#menu2").show();
} else {
$("#menu2").hide();
}
});
$(document).on('change',"#select2", function () {
if ($(this).val() == "Yes") {
$("#menu3").show();
} else {
$("#menu3").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name1" id="select1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="menu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="name2" id="select2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="menu3">
<label for="Menu2">Menu3</label>
<select class="form-control" name="name3" id="select3">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>

Your html and javascript both are wrong. you can not give same id for multiple controls. Here is an example
Live Demo
<div class="form-row">
<div class="form-group col-md-4">
<label for="Menu1">Menu1</label>
<select class="form-control" name="name" id="Menu1">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="divMenu2">
<label for="Menu2">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group col-md-4" id="divMenu3">
<label for="Menu2">Menu3</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(function() {
$("#divMenu2").hide();
$("#divMenu3").hide();
$("#Menu1").change(function() {
if ($(this).val() == "Yes") {
$("#divMenu2").show();
} else {
$("#divMenu2").hide();
}
});
$("#Menu2").change(function() {
if ($(this).val() == "Yes") {
$("#divMenu3").show();
} else {
$("#divMenu3").hide();
}
});
});

Hiding select option based on value that i choose

So i'm having a simple code like this
<div class="form-group form-material floating">
<select class="form-control" name="first" id="first">
<option value="opt1">First Option</option>
<option value="opt2">Second Option</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
and
<div class="form-group form-material floating">
<select class="form-control" name="second" id="second">
<option value="val1">First Value</option>
<option value="val2">Second Value</option>
<option value="val3">Third Value</option>
<option value="val4">Fourth Value</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
What I am trying to do is when i choose 'opt1' i want the other select only show 'val2, val3, val4' and if i choose 'opt2' i want the other select only show 'val1, val2, val4' .. how do i do that ?

$("#first").on('change', function(){
if(this.value == 'opt1')
{
$(".op3").removeClass("hidden");
$(".op1").addClass("hidden");
}
else if(this.value == 'opt2')
{
$(".op1").removeClass("hidden");
$(".op3").addClass("hidden");
}
});
.hidden{display:none !important;}
<div class="form-group form-material floating">
<select class="form-control" name="first" id="first">
<option value="opt1">First Option</option>
<option value="opt2">Second Option</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
<div class="form-group form-material floating">
<select class="form-control" name="second" id="second">
<option class="op1" value="val1">First Value</option>
<option value="val2">Second Value</option>
<option class="op3" value="val3">Third Value</option>
<option value="val4">Fourth Value</option>
</select>
<label class="floating-label" for="inputStatus">Option</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

JavaScript hide a corresponding field with specific delimiter

I want to hide the corresponding textarea field of a dropdown, It will be used in a lot of instance that's why I want it on a function.
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1" ></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2" ></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="" >Please Select</option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
<option value="N/A" >N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3" ></textarea>
</div>
As you can see in the code the dropdown name=campaign-dd# has a specific textarea name=campaign-comment#.

On initial load. I want to hide it. And will display it once YES is selected
In this case you can put a common class on all the .field elements which contains the comment fields, in my example below I used .comment and hide them in CSS. Then in JS you can put a change event handler on the select elements which shows/hides the related comment field based on the selected option. Try this:
$('select').change(function() {
$(this).closest('.field').nextAll('.field:first').toggle($(this).val() == 'Yes');
});
.field.comment {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field comment">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field comment">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field comment">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

Adding classes that makes more sense would be easier, but you can construct the name for the textarea from the name given to the select, to hide it etc.
$('.field select').on('change', function() {
var parts = this.name.split('-');
var numb = parts[1].replace(/\D/g, '');
$('[name="' + parts[0] + '-comment' + numb + '"]').toggle(this.value !== 'Yes')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em>Select "Yes" to hide comment</em>
<br><br><br>
<div id="formElement1" class="field">
<label for="field1">Start and end date defined</label>
<select id="field1" name="campaign-dd1">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement2" class="field">
<label for="field2">Comment(s)</label>
<textarea id="field2" name="campaign-comment1"></textarea>
</div>
<div id="formElement3" class="field">
<label for="field3">Content and workflow are compliant to requirements</label>
<select id="field3" name="campaign-dd2">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement4" class="field">
<label for="field4">Comment(s)</label>
<textarea id="field4" name="campaign-comment2"></textarea>
</div>
<div id="formElement5" class="field">
<label for="field5">Flow working as planned</label>
<select id="field5" name="campaign-dd3">
<option value="">Please Select</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="N/A">N/A</option>
</select>
</div>
<div class="clear"></div>
<div id="formElement6" class="field">
<label for="field6">Comment(s)</label>
<textarea id="field6" name="campaign-comment3"></textarea>
</div>

HTML form with JS does not work properly in PHP

I have a form with JS where I hide and show form's fields after choosing option with radiobuttons.
<?php require_once 'resources/menus/adminMenu.php'; ?>
<div class="col-lg-offset-3 col-lg-6 ">
<div class="well bs-component">
<form class="form-group" method="post">
<fieldset>
<legend>Wyszukaj</legend>
<div class="form-group" style="display: block" id="queryIndex">
<label for="index" class="control-label">Indeks</label>
<input class="form-control" id="index" name="index" type="text">
</div>
<div class="form-group" style="display: none" id="queryName">
<label for="name" class="control-label">Imię</label>
<input class="form-control" id="name" name="name" type="text">
<label for="surname" class="control-label">Nazwisko</label>
<input class="form-control" id="surname" name="surname" type="text">
</div>
<div class="form-group" style="display: none" id="queryFaculty">
<label for="faculty" class="control-label">Wydział</label>
<select class="form-control" id="faculty" name="faculty" required="required">
<option value=""></option>
<option value="Wydział A">Wydział A</option>
<option value="Wydział B">Wydział B</option>
<option value="Wydział C">Wydział C</option>
<option value="Wydział D">Wydział D</option>
<option value="Wydział E">Wydział E</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySubject">
<label for="subject" class="control-label">Kierunek</label>
<select class="form-control" id="subject" name="subject" required="required">
<option value=""></option>
<option value="Kierunek AA">Kierunek AA</option>
<option value="Kierunek AB">Kierunek AB</option>
<option value="Kierunek AC">Kierunek AC</option>
<option value="Kierunek BA">Kierunek BA</option>
<option value="Kierunek BB">Kierunek BB</option>
<option value="Kierunek BC">Kierunek BC</option>
<option value="Kierunek CA">Kierunek CA</option>
<option value="Kierunek CB">Kierunek CB</option>
<option value="Kierunek CC">Kierunek CC</option>
<option value="Kierunek DA">Kierunek DA</option>
<option value="Kierunek DB">Kierunek DB</option>
<option value="Kierunek DC">Kierunek DC</option>
<option value="Kierunek EA">Kierunek EA</option>
<option value="Kierunek EB">Kierunek EB</option>
<option value="Kierunek EC">Kierunek EC</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySystem">
<label for="system" class="control-label">System</label>
<select class="form-control" id="system" name="system" required="required">
<option value=""></option>
<option value="st">Stacjonarne</option>
<option value="nst">Niestacjonarne</option>
</select>
</div>
<div class="form-group" style="display: none" id="queryDegree">
<label for="degree" class="control-label">Stopień</label>
<select class="form-control" id="degree" name="degree" required="required">
<option value=""></option>
<option value="I">1. stopień (inżynierskie/licencjat)</option>
<option value="II">2. stopień (magisterskie)</option>
</select>
</div>
<div class="form-group" style="display: none" id="querySemester">
<label for="semester" class="control-label">Semestr</label>
<select class="form-control" id="semester" name="semester" required="required">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="form-group">
<input type="radio" name="search" value="index" checked="checked"
onClick="changeForm('queryIndex')"> Indeks
<input type="radio" name="search" value="name"
onClick="changeForm('queryName')"> Imię i nazwisko
<input type="radio" name="search" value="faculty"
onClick="changeForm('queryFaculty')"> Wydział
<input type="radio" name="search" value="subject"
onClick="changeForm('querySubject')"> Kierunek
<input type="radio" name="search" value="system"
onClick="changeForm('querySystem')"> System
<input type="radio" name="search" value="degree"
onClick="changeForm('queryDegree')"> Stopień
<input type="radio" name="search" value="semester"
onClick="changeForm('querySemester')"> Semestr
</div>
<script type="text/javascript">
function changeForm(element) {
document.getElementById('queryIndex').style.display = 'none';
document.getElementById('queryName').style.display = 'none';
document.getElementById('queryFaculty').style.display = 'none';
document.getElementById('querySubject').style.display = 'none';
document.getElementById('querySystem').style.display = 'none';
document.getElementById('queryDegree').style.display = 'none';
document.getElementById('querySemester').style.display = 'none';
document.getElementById(element).style.display = 'block';
}
</script>
<div class="form-group col-lg-4">
<div class="control-label">
<button type="submit" class="btn btn-primary" name="submit" value="searchStudent">Szukaj
</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
Also I have PHP file, where I get data from this form.
function studentWindow()
{
$this->setView("AdminPanel", "StudentWindow");
if (isset($_POST['submit']) && $_POST['submit'] == 'searchStudent') {
$query="";
$data=array();
if($_POST['search']=='index'){
$data['index']=sanitizeString($_POST['index']);
$query="st_index LIKE '?%'";
}
elseif($_POST['search']=='name'){
$data['name']=sanitizeString($_POST['name']);
$data['surname']=sanitizeString($_POST['surname']);
$query="name LIKE '?%' AND surname LIKE '?%'";
}
elseif($_POST['search']=='faculty'){
$data['faculty']=$_POST['faculty'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject INNER JOIN faculty AS f ON s.id_faculty=f.id_faculty WHERE f.name=?';
}
elseif($_POST['search']=='subject'){
$data['subject']=$_POST['subject'];
$query='AS st INNER JOIN subject AS s ON st.id_subject=s.id_subject WHERE s.name=?';
}
elseif($_POST['search']=='system'){
$data['system']=$_POST['system'];
$query='system=?';
}
elseif($_POST['search']=='degree'){
$data['degree']=$_POST['degree'];
$query='degree=?';
}
elseif($_POST['search']=='semester'){
$data['semester']=$_POST['semester'];
$query='semester=?';
}
$this->loadModel("AdminPanel");
$model = new AdminPanelModel();
$model->getStudents($query,$data);
}
}
This is a problem. I can't get data from forms and also the button doesn't work. I made other forms like this but without JS. This may be the cause. Do you have any suggestions or solutions?
P.S. Sorry for my English ;)

The problem is using required='required' when the form fields are not required.
The user can submit at any time and it is not evident that you must click each radio button in turn to fill out that portion, if that was the intention.
I ran your code as plain HTML and examined the POST data in the Chrome Dev Tools and it works fine if you fill out all fields with required...
You will get an error in console that says the following:
An invalid form control with name='faculty' is not focusable.
Chrome is trying to focus the field to add error messages, but you set style.display = 'none' so it can't.

Dropdownlist using javascript

I have these 3 dropdownlist. I want to show only 1 dropdownlist according to values selected in the first DDL. can someone help me with this :
HTML :
<div class="field">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For" >
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="field1">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type" >
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="field2">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type" >
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="field3">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type" >
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>
Means if i select shops in first DDL then the second DDL should be DIV field2

Basically, the idea is to get the value of message_for select using jquery and show or hide other selects based on its value.
$("#message_for").on("change", function(){
if($(this).val() == "shop"){
$(".field1").show();
}
//here add more cases to show relevant selects
});
I have created this jsfiddle for you - https://jsfiddle.net/guranjanpsingh/h9prdxyy/2/

The easiest way is to add classes to divs with the same name as option values in order to target them.
$('div:not(".general")').hide();
$('#message_for').on('change', function() {
$('div:not(".general")').hide();
$('.' + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="general">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For">
<option value=''>Please Select</option>
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="shop">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type">
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="offers">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type">
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="events">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type">
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>