Develop Reference

Show hidden drop down based on selected option in another drop down with jQuery

I'm trying to figure out how to show hidden div but I'm a little rusty on jQuery.
So when a user selects "Yes" from Menu1 dropdown, I want the Menu2 dropdown to show up. l'm using style="visibility: hidden; to hide Menu2.
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">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" style="visibility: hidden;">**
<label for="inputPassword4">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</div>

You can do it very easily in jQuery using the show and hide functions:
$("#Menu2Container").hide();
$("#Menu1").on("change", function(){
if ($(this).val()=="Yes")
$("#Menu2Container").show();
else
$("#Menu2Container").hide();
});
How this works:
First give a class or id to #Menu2's container so you can target it in your jQuery, e.g. <div id="Menu2Container">
Hide your Menu2 container in the jQuery when the page loads
Add an event handler for change events on #Menu1 to detect when an option is selected.
In the handler, get the value of the selected option using val()
If "Yes" is selected, show() the #Menu2Container, otherwise hide() it
Working Example:
$("#Menu2Container").hide();
$("#Menu1").on("change", function(){
if ($(this).val()=="Yes")
$("#Menu2Container").show();
else
$("#Menu2Container").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="inputEmail4">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="Menu2Container">
<label for="inputPassword4">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</div>
Note: I would suggest considering if the grid col is the best container to hide for the menu - this obviously depends on your layout, but showing and hiding the col will affect the grid layout and could affect the overall appearance.

You can use this siple javascript code for that.
No need to go for jQuery here.
just give a id to hidden div so we can access it.
document.getElementById('Menu1').onchange = e => {
let hiddenElement = document.getElementById('hiddenDiv')
e.target.value == 'Yes' ?
hiddenElement.style.visibility = 'visible' :
hiddenElement.style.visibility = 'hidden'
}
<div class="form-group col-md-4">
<label for="inputEmail4">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='hiddenDiv' style="visibility: hidden;">**
<label for="inputPassword4">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</div>

Vanilla Javascript:
You can use an event listener to change the visibility to visible.
Set a conditional in your event handler and set the handler to change, check to see if the value of the target of your event listener is set to the desired value Yes, if it is, then set the div to visible...
I did add an ID to your DIV to target it directly...
let showMe = document.getElementById("showMe");
let menu1 = document.getElementById("Menu1");
menu1.addEventListener("change", function(e){
if(this.value === 'Yes'){
showMe.style.visibility = 'visible';
}
});
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">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 id="showMe" class="form-group col-md-4" style="visibility: hidden;">**
<label for="inputPassword4">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</div>

You can simply use ternary operator (short form of if and else)
Along with jQuery functions like => show() and hide() function to display your second menu2 when you select Yes
Just add this code in jQuery:
const $Menu2 = $("#Menu2Container") //element
$Menu2.hide(); //Initially hide
//Change function
$("#Menu1").on("change", function() {
$(this).val() == "Yes" ? $Menu2.show() : $Menu2.hide();
});
Live working demo:
const $Menu2 = $("#Menu2Container") //element
//Initially hide
$Menu2.hide();
//Chage function
$("#Menu1").on("change", function() {
$(this).val() == "Yes" ? $Menu2.show() : $Menu2.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputEmail4">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="Menu2Container">
<label for="inputPassword4">Menu2</label>
<select class="form-control" name="pets" id="Menu2">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
</select>
</div>

How to set parameter values to a "onClick" function using javascript or jquery

I am trying to set parameters to onClick event inside a html button using javascript.
This is how html button looks like:
<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>
param1 = should be the value from a html select element with id='year' and name='year'
param2 = should be the value from a html select element with id='grade' and name='grade'
param3 = should be the value from a html select element with id='subject' and name='subject'
These are the html select options
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>
I have no clue how to set values to param1, param2, param3
This is what I tried but it feels wrong.
$('#upload-button').val = $('#year').val;
Can someone please help me?
I need to set values for the parameters (param1, param2, param3) in the function uploadFileIGCSE('param1', 'param2', 'param3') using javascript or jquery
Thank you

I can understand your needs. if you really wanted to do this only with HTML element, here is the way.
<button type="button" id="upload-button"
onclick="uploadFileIGCSE(
document.querySelector('#year').value,
document.querySelector('#grade').value,
document.querySelector('#subject').value)"
class="btn btn-success" aria-expanded="false">Upload</button>
Here is the working example
function uploadFileIGCSE(val1, val2, val3){
document.querySelector('#log').innerHTML = `${val1}, ${val2}, ${val3}`
}
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>
<button type="button" id="upload-button"
onclick="uploadFileIGCSE(
document.querySelector('#year').value,
document.querySelector('#grade').value,
document.querySelector('#subject').value)"
class="btn btn-success" aria-expanded="false">Upload</button>
<p>log value : (<span id="log"></span>)</p>

You really shouldn't be using inline event listeners like onclick (for maintainability, security and separation of concerns reasons).
Instead, add the listener using the DOM API's HTMLElement.prototype.addEventListener():
document.getElementById('upload-button').addEventListener('click', function() {
uploadFileIGCSE(year.value, grade.value, subject.value);
})
function uploadFileIGCSE(x,y,z) {
console.log(x,y,z);
}
document.getElementById('upload-button').addEventListener('click', function() {
uploadFileIGCSE(year.value, grade.value, subject.value);
})
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>
<button type="button" id="upload-button">Upload</button>

try this
<button type="button" id="upload-button" onclick="getOption()" class="btn btn-success"
aria-expanded="false">Upload</button>
function getOption() {
var year = document.getElementById("year");
var year_option = year.options[year.selectedIndex].value;
var grade = document.getElementById("grade");
var grade_option = grade.options[grade.selectedIndex].value;
var subject = document.getElementById("subject");
var subject_option = subject.options[subject.selectedIndex].value;
uploadFileIGCSE(year_option, grade_option, subject_option)
}

$('#upload-button').click(function(e) {
var year = $('#year').val();
var grade = $('#grade').val();
var subject = $('#subject').val();
uploadFileIGCSE(year, grade, subject);
})
You could try something like this.

The click event can simply run an anonymous function. Its only input will be the default event object supplied by the DOM engine. That function can then gather the values from the various elements you're interested in, and make a further call to the uploadFileIGCSE function, passing those values as parameters.
Here's a demo. Note that I've used an unobtrusive event handler using addEventListener() in the JS code, rather than "onclick" within the HTML. This is generally considered to be better practice, as it makes the code easier to read, maintain and debug, and helps to separate the functionality from the presentation.
N.B. you could use jQuery for any/all of this, but equally it's not really necessary, it doesn't really add much value in this situation.
var button = document.getElementById("upload-button");
button.addEventListener("click", function(event) {
var year = document.getElementById("year").value;
var grade = document.getElementById("grade").value;
var subject = document.getElementById("subject").value;
uploadFileIGCSE(year, grade, subject);
});
function uploadFileIGCSE(year, grade, subject) {
console.log(year, grade, subject);
}
<button type="button" id="upload-button" onclick="uploadFileIGCSE('param1', 'param2', 'param3')" class="btn btn-success" aria-expanded="false">Upload</button>
<div class="col-md-3">
<select id="year" name="year" class="form-control">
<option value="select" disabled="disabled">- Select Year -</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
</select>
</div>
<div class="col-md-3">
<select id="grade" name="grade" class="form-control">
<option value="select" disabled="disabled">- Select Grade -</option>
<option value="1">Grade 5</option>
<option value="2">Grade 6</option>
<option value="3">Grade 7</option>
</select>
</div>
<div class="col-md-3">
<select id="subject" name="subject" class="form-control">
<option value="select" disabled="disabled">- Select Subject -</option>
<option value="1">Edexcel</option>
<option value="2">National</option>
<option value="3">Other</option>
</select>
</div>

Take the value and create filter from input field?

How to take text from selected options and wrap it into div and append that div to the one with class appendElements?
here is jsfiddle https://jsfiddle.net/2w5dp7vk/14/ I am trying to add filter when i check some option or when i type something in input field. I want to be able to take the value from input or select option and wrap that value into div tag and append it on .appendElements when i click on done button.
<div class="appendElements"></div>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>

First, you've to attach a change event to your select èlement .searchFilter, then when the user changes you've to get the text of the selected option using $('.searchFilter option:selected').text() and attach it to your output div .appendElements, like:
jQuery suggestion :
var selectElement = $('.selectpicker');
selectElement.on('change', function() {
var selected_option_text = selectElement.find('option:selected').text();
$('.appendElements').text(selected_option_text);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<br>
<div class="appendElements"></div>
VanillaJS suggestion :
var selectElement = document.querySelector('.selectpicker');
selectElement.addEventListener('change', function() {
var selected_option_text = selectElement.selectedOptions[0].text;
document.querySelector('.appendElements').textContent = selected_option_text;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<br>
<div class="appendElements"></div>

You can get the value of the select when it changes and set it as the textContent of the div in which you want to display the value of the select.
<div class="searchFilter">
<select class="selectpicker" data-live-search="true" onchange="showChanges()" id="selectpicker">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<p/>
<div id="result"></div>
<script>
function showChanges(){
document.getElementById("result").textContent = document.getElementById("selectpicker").value;
}
</script>
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="searchFilter">
<select class="selectpicker" data-live-search="true" onchange="showChanges()" id="selectpicker">
<option value="all">All</option>
<option value="published">Published</option>
<option value="draft">Draft</option>
<option value="in-review">In Review</option>
<option value="deleted">Deleted</option>
</select>
</div>
<p/>
<div id="result"></div>
<script>
function showChanges(){
$('#result').text($('#selectpicker').val());
}
</script>

Get text from closest selected dropdown option with class on button click

I have many dropdowns, when I click the button I want it to look up the select option that is selected and alert me the text it says, like 'grape'.
It must use .closest, have tried many variations but cant seem to find it.....
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" value="Edit Row" class="editrowbutton">
JQUERY (Nearest I can get)
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).closest('select').find('option:selected').text();
alert(thetext);
});

You are missing the class editrowbutton on your buttons in the example.
use .prev to get the previous element from target.
$(document).on('click', '.editrowbutton', function() {
var thetext = $(this).prev().find('option:selected').text();
alert(thetext);
});
http://jsfiddle.net/SeanWessell/wt00c2wu/
.closest looks up the tree at parents. Since the select is not a parent you will not return anything.
If you wanted to search the siblings you can use prev('selector') or next('selector') as well.
https://api.jquery.com/category/traversing/tree-traversal/

You can also use the data-* attribute, preventing DOM position mistakes.
$(function(){
$(document).on("click",'.editrowbutton',function(){
var target = $(this).data("select");
alert($('select[name='+target+'] option:selected').text())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="div0" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div0" class="editrowbutton" value="Edit Row">
<select name="div1" class="dropdowns">
<option value="orange">orange</option>
<option value="apple">apple</option>
<option value="grape">grape</option>
<option value="peas">peas</option>
</select>
<input type="button" name="mybutton" data-select="div1" class="editrowbutton" value="Edit Row">

Show/Hide toggle not working with select name for database output

This was originally pointed out and solved this morning, but then I had to add name="region_option" to the select element so that it would output the value into a SQL query. The database/query stuff is all good, however I could not get the Show/Hide to work properly with the regions once again. I'm stuck at getting it to work with the select having the name="region_option".
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="bodytype">
<h2>Bodytype</h2>
<input class="bodytype--owls" name="bodytype_option" type="radio" value="owls">Owls</input>
<input class="bodytype--others" name="bodytype_option" type="radio" value="others">Others</input>
</div>
<div class="country">
<h2>Pick country</h2>
<select name="country_option">
<option value="not-selected">Select the country</option>
<option value="England">England</option>
<option value="Scotland">Scotland</option>
<option value="Ireland">Ireland</option>
<option value="Wales">Wales</option>
</select>
</div>
<div class="not-selected">
<h2>Notice!</h2>
<p>Please select a country to be able to pick the region.</p>
</div>
<div class="regions" id="England">
<h3>Pick region in England</h3>
<select name="region_option">
<option value="North">North</option>
<option value="South">South</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="Midlands">Midlands</option>
</select>
</div>
<div class="regions" id="Scotland">
<h3>Pick region in Scotland</h3>
<select name="region_option">
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<div class="regions" id="Ireland">
<h3>Pick region in Ireland</h3>
<select name="region_option">
<option value="Northern">Northern</option>
<option value="Republic">Republic</option>
</select>
</div>
<div class="regions" id="Wales">
<h3>Pick region in Wales</h3>
<select name="region_option">
<option value="North">North</option>
<option value="South">South</option>
</select>
</div>
<br /><br />
<button class="identify__button">Identify</button>
jQuery
$(document).ready(function(){
$('#England, #Scotland, #Ireland, #Wales').hide();
$('.country_option').change(function() {
$('.not-selected, #England, #Scotland, #Ireland, #Wales').hide();
$('#' + $(this).val()).show();
});
});
I would love to know what I'm missing to fix this, and why did it not work in the first place. I have taken the liberty to put it in a CodePen for ease of convenience.
Thanks in advance.

You have a selector for class=country_option when it is actually name=country_option.
try
$('[name="country_option"]').change(function() {
JSFiddle: http://jsfiddle.net/mvt0982x/
Or better yet (to be more obvious):
$('select[name="country_option"]').change(function() {