I'm trying to automatically hide divs in JavaScript using the below code, such that they can only be displayed/hidden upon clicking a select option:
//hiding the divs
$(document).ready(function(){
function hide(){
$(".atm").hide();
$(".bank").hide();
}
hide();
});
For reasons unknown to me, the code does not work(the divs are still not hidden). Below is the rest of the code (it works properly, only the code above isn't hidding divs)
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
Anywhere I'm going/doing wrong?
Bind a change event to your select
$(document).ready(function(){
function hide(){
$(".atm").toggle();
$(".bank").toggle();
}
$('select').on('change',hide).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="atm">atm</div>
<div class="bank">bank</div>
<select>
<option>select</option>
<option>select</option>
</select>
Check this answer here
$(document).ready(function(){
$(".atm").hide();
$(".bank").hide();
$('select').on('change',function(){
if($('select').val()=='atm'){
$('.atm').show();
$('.bank').hide();
}
else if($('select').val()=='bank'){
$('.bank').show();
$('.atm').hide();
}
});
});
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></head>
<body>
<select><option value="atm">ATM</option><option value="bank">Bank</option></select>
<div class="atm">ATM</div>
<div class="bank">BANK</div>
$(document).ready(function(){
$(".atm").hide();
$(".bank").hide();
$('select').change(function(){
$(".atm").toggle();
$(".bank").toggle();
}).
});
Try this. This will hide the classess on page load and then after changing the select box it will show. toggle() function is used to hide and show the elements.
Update to unresolved question -
Copy the following code into a text.html file and run it a browser and let us know the result:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function hide()
{
$('.atm').hide();
$('.bank').hide();
}
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
</script>
</head>
<body>
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
</body>
</html>
Please see update at end according to question's update:
The js looks fine to me it works in example below - may be your html:
(Do your div's in html have class='atm' & class='bank' ?)
$(document).ready(function ()
{
function hide ()
{
$(".atm") .hide();
$(".bank").hide();
$('.btnHideShow').text('Show');
}
function show ()
{
$(".atm") .show();
$(".bank").show();
$('.btnHideShow').text('Hide');
}
$('.btnHideShow').click(function ()
{
if($('.atm').is(':hidden'))
{
show();
}
else
{
hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='atm'>Div ATM</div>
<div class='bank'>Div Bank</div>
<button class="btnHideShow">Hide</button>
Using select:
$(document).ready(function ()
{
function hide ()
{
$(".atm") .hide();
$(".bank").hide();
$('.btnHideShow').text('Show');
}
function show ()
{
$(".atm") .show();
$(".bank").show();
$('.btnHideShow').text('Hide');
}
$('.sel').change(function ()
{
//console.log($(this).val());
var val = $(this).val();
if(val === 'None')
{
hide();
}
else
if(val === 'Bank-ATM')
{
show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='atm'>Div ATM</div>
<div class='bank'>Div Bank</div>
<select class="sel">
<option>Bank-ATM</option>
<option>None</option>
</select>
In your update to the question you left out your hide function:
(are you including jquery lib?)
function hide()
{
$('.atm').hide();
$('.bank').hide();
}
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
Related
I am making a form that will have checkboxes and entry text. When a checkbox is check, related text should appear adjacent to it. This is my current code, but it does not work:
HTML:
<input type="checkbox" class="box1" onchange="showHide()"> Option 1
<div class="hid box1">
<select name="option1">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
Comments: <input type="text" name="option1Comment">
</div>
CSS:
.hid {
display: none;
}
JavaScript:
function showHide() {
var checkBox = document.getElementByClassName(this);
var text = document.getElementByClassName(this "hid");
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
}
There are a couple of things you should fix in your code.
First, you could change the function call on the <input> from
onchange="showHide()" to onchange="showHide(this)"
Then, you could fix the syntax of getElementByClassName on your function or change it to querySelector to get just the one Node you want.
After that you could do something like this to hide or show your <div>:
function showHide(element) {
let checkboxClass = element.classList[0];
let div = document.querySelector("div.hid." + checkboxClass);
div.style.display = (element.checked) ? "block" : "none";
}
I want to append div on click add more and remove that div according to my code
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
});
});
this is my code it works perfect but i want to not delete first div and remove delete button my html code is
<div id="appendbox">
<div class="add-skils-form">
<div class="skill-a">
<input type="text" class="inputtextbox" value="" name="" placeholder="Enter Your Key Skills" />
</div>
<div class="skill-b">
<select id="key-skills-select" class="defualt-select default-size">
<option value="3">Advanced</option>
<option value="2">Intermediate</option>
<option value="1" selected>Beginner</option>
</select>
<i class="fa fa-trash" aria-hidden="true"></i>
</div>
</div>
</div>
how could i do please suggest me
Try with this.
$(document).ready(function() {
deleteRow();
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
$('.delete-row').show();
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
deleteRow();
});
function deleteRow(){
if($('.add-skils-form').length == 1){
$('.delete-row').first().hide();
}
}
});
Another Solution
Check here https://fiddle.jshell.net/o2f0kskf/1/
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().find("input[type='text']").val("").end().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest(".add-skils-form").not(":first-child").remove();
});
});
end goal is to only show the divs, containing the text equal to that of the select menu/dropdown. But I think I can make my way there if I could just figure out how to hide them. So I have a piece of HTML:
<select id="select">
<option selected>Show All</option>
<option>Red</option>
<option>Blue</option>
</select>
<div class="row">
<div class="option">red</div>
</div>
<div class="row">
<div class="option">blue</div>
</div>
<div class="row">
<div class="option">red</div>
</div>
<div class="row">
<div class="option">blue</div>
</div>
and some jQuery:
$("#select").change(function () {
var text = $(".text").text();
var option = $("#select option:selected").text();
if(text === option)
$( ".option:contains(" + text + ")" ).parent('div').hide();
});
I feel like I tried various stuff, with no luck. If I set the value of the text to begin with, then it's easy, the trick here is to have the text to look for depend on the <select> so that in theory you would just have to add options to that. Any suggestions on this?
Here is a working jsfiddle for it: https://jsfiddle.net/dumqz5kL/
And the working script:
$(document).ready(function(){
$("#select").change(function () {
_obj = $('option:selected', this);
if (_obj.index() == 0) {
$('.row').show();
} else {
$('.row').hide();
$('.option').each(function(){
if ($(this).text() == _obj.text().toLowerCase()) {
$(this).parent().show();
};
});
};
});
});
Targeting only one toggle (the next div after select) in jquery not all of them
This works except it shows all of the toggle when I only want it to show just the one underneath it.
Heres the html
$( ".toggle" ).hide();
$(function () {
$(".binary").change(function() {
if ($(this).val() == "0"){
$( ".toggle" ).hide();
} else {
$( ".toggle" ).show();
}
$("#pane").customScrollbar("resize", true);
});
});
Heres the html
<div class="option checkbox">
<label class="field_wrap">
<div class="label">1</div>
<div class="field">
<select class="binary" name="option_1">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">
toggle 1
</div>
<div class="option checkbox">
<label class="field_wrap">
<div class="label">1</div>
<div class="field">
<select class="binary" name="option_1">
<option value="0"></option>
<option value="1"></option>
</select>
</div>
</label>
</div>
<div class="toggle">
toggle 2
</div>
You should try :first selector
$(function () {
$(".binary:first").change(function() {
if($(this).val() == "0"){
$(this).next(".toggle").hide();
} else {
$(this).next(".toggle").show();
}
$("#pane").customScrollbar("resize", true);
});
});
try following
$( ".toggle" ).hide();
$(function () {
$(".binary").change(function() {
if ($(this).val() == "0"){
$(this).parent().parent().parent().next().hide();
} else {
$(this).parent().parent().parent().next().show();
}
$("#pane").customScrollbar("resize", true);
});
});
This is similar to #Ganesh's answer but has greater specificity, which might be important in your scenario.
$(".toggle").hide();
$(function () {
$(".binary").change(function () {
if ($(this).val() == "0") {
console.log($(this).closest('div.option.checkbox').length);
$(this).closest('div.option.checkbox').next(".toggle").hide();
} else {
$(this).closest('div.option.checkbox').next(".toggle").show();
}
$("#pane").customScrollbar("resize", true);
});
});
You can use jQuery's .next() method.
$(function () {
$(".binary").change(function() {
if($(this).val() == 0){
$(this).parents("div.checkbox").next('.toggle').hide();
} else {
$(this).parents("div.checkbox").next('.toggle').show();
}
$("#pane").customScrollbar("resize", true);
});
});
Here is a Demo Fiddle.
My question is I have three select boxes and user select first select box's option than select second select box's option and finally the third select box's options will load by user selection. It works but when user select the third select box's option I want to display a text but It doesn't work here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script></script>
<script type="text/javascript">
var zero="0,00";
var one="0,01";
$(document).ready(function() {
$('#main').on('change', '.select-box', function() {
if ($(".select-box option[value='1']").prop('selected') && $(".select-box option[value='1986']").prop('selected')) {
$('#street').html("<option value='2'>test</option><option value='3'>test2</option>");
}
if ($(".select-box option[value='1']").prop('selected') && $(".select-box option[value='1986']").prop('selected') && $(".select-box option[value='3']").prop('selected')) {
document.getElementById("demo3").innerHTML=""+zero;
}
});
});
</script>
<script type="text/javascript">
var x="",i;
for(i=1986;i<2013;i++)
{
x=x + "<option value='"+i+"'> " + i + "</option>";
}
$(document).ready(function() {
document.getElementById("forloop").innerHTML="<select class='select-box'><option>Empty/option>"+x+"</select>";
});
</script>
</head>
<body>
<p id="forloop"></p>
<div id="main">
<select class="select-box">
<option value="1">Hello</option>
</select>
<p></p>
<select class="select-box" id="street">
<option>Empty<option>
</select>
</div>
<p id="demo3">
</body>
</html>
You have multiple HTML syntax errors in your string concatenation. You're already using jQuery; for sanity's sake (yours and ours) stop constructing HTML with strings.
var selectBox = $('<select>');
$('<option>')
.text('Empty')
.appendTo(selectBox);
for (var i = 1986; i < 2013; i++) {
$('<option>')
.text(i)
.val(i)
.appendTo(selectBox);
}
selectBox.appendTo($('#forloop'));