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();
};
});
};
});
});
Related
I need help with basic if then script
https://jsfiddle.net/TeoMorabito/92mtqf54/2/#&togetherjs=3z41zCsyOi
I'm sure it something obvious haha
var selectedVal = document.getElementsByName('select-yui_3_17_2_1_1540352978001_90484-field').value;
if(selectedVal == 'NO')
{var element = document.getElementById('textarea-yui_3_17_2_1_1540167138612_32440');
element.style.visibility = 'hidden';}
First you have to call onChange function of dropdown and then you have to get the valu of Dropdown by using ID. See the below working code.
$(function() {
$('#yui_3_17_2_1_1540357839233_566').change(function(){
var selectedVal = document.getElementById('yui_3_17_2_1_1540357839233_566').value;
var element = document.getElementById('textarea-yui_3_17_2_1_1540167138612_32440');
if(selectedVal == 'NO')
{
element.style.visibility = 'hidden';
}else{
element.style.visibility = 'visible';
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-yui_3_17_2_1_1540352978001_90484" class="form-item field select">
<label class="title" for="select-yui_3_17_2_1_1540352978001_90484-field">Found a Turtle track or nest ?</label>
<div class="description">if something of interest was found, please proceed to the next section of the data sheet
If no, then scroll to the bottom and submit the data sheet.</div>
<select name="select-yui_3_17_2_1_1540352978001_90484-field" id="yui_3_17_2_1_1540357839233_566">
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
</div>
<div id="textarea-yui_3_17_2_1_1540167138612_32440" class="form-item field textarea">
<label class="title" for="textarea-yui_3_17_2_1_1540167138612_32440-field">Location Description</label>
<textarea class="field-element " id="textarea-yui_3_17_2_1_1540167138612_32440-field"></textarea>
</div>
Im still kind of new to scripts, but i know what im trying to do is not impossible. im trying to use a select option to show div's, I have it currently so it shows 1 div at a time currently but I cannot get it to show 2 separate divs at the same time. so for example im trying to select option 1, and to unhide the same selected options that were selected.
I tried what was suggested in "Can an Option in a Select tag carry multiple values?"
but none of it worked
<script>
document
.getElementByValue('target')
.addEventListener('change', function () {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementByValue(this.value);
if (vis !== null) {
vis.className = 'initial';
}
if (target !== null ) {
target.className = 'vis';
}
});
</script>
<div class="header">
<select name="dropdown" id='target'>
<option value="temp1" value2="form1">option1</option>
<option value="temp2" value2="form2">option2</option>
</select>
</div>
<div class="temps">
<div id="temp1" class="initial"><?php include "temp1.php"; ?></div>
<div id="temp2" class="initial"><?php include "temp2.php"; ?></div>
</div>
<div class="forms">
<div id="form1" class="initial"><?php include "form1.php"; ?></div>
<div id="form2" class="initial"><?php include "form2.php"; ?></div>
</div>
document.getElementById('target').addEventListener('change', function () {
let divs = document.querySelectorAll('.initial, .vis'); // grab all divs that have the class "initial" or "vis"
for (let i = 0; i < divs.length; i++) {
// loop over all divs
let div = divs[i];
if (div.classList.contains(this.value)) {
// the div's class list contains the value of the select box, e.g. "option-1" or "option-2"
div.classList.remove('initial');
div.classList.add('vis'); // make the div visible
} else {
div.classList.add('initial');
div.classList.remove('vis'); // otherwise make the divs invisible
}
}
});
.initial {
display: none;
}
<div class="header">
<select name="dropdown" id="target">
<option value="option-1">option1</option>
<option value="option-2">option2</option>
</select>
</div>
<div class="temps">
<div class="initial option-1">Temp 1</div>
<div class="initial option-2">Temp 2</div>
</div>
<div class="forms">
<div class="initial option-1">Form 1</div>
<div class="initial option-2">Form 2</div>
</div>
your selector was wrong its document.getElementById() not a document.getElementByValue .And you are using querySelectorAll() its matching all the .vis class element ,so you need to iterate with forEach .And change the if condition with vis.length>0
document.getElementById('target').addEventListener('change', function() {
var vis = document.querySelectorAll('.vis'),
target = document.getElementById(this.value);
if (vis.length > 0) {
vis.forEach(function(a) {
a.className = 'initial';
console.log(a.outerHTML)
})
}
if (target !== null) {
target.className = 'vis';
}
console.log(target.outerHTML)
});
<div class="header">
<select name="dropdown" id='target'>
<option value="temp1" value2="form1">option1</option>
<option value="temp2" value2="form2">option2</option>
</select>
</div>
<div class="temps">
<div id="temp1" class="initial">
<?php include "temp1.php"; ?>
</div>
<div id="temp2" class="initial">
<?php include "temp2.php"; ?>
</div>
</div>
<div class="forms">
<div id="form1" class="initial">
<?php include "form1.php"; ?>
</div>
<div id="form2" class="initial">
<?php include "form2.php"; ?>
</div>
</div>
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>
I am driving myself crazy trying to figure this out...
I would like two drop-down boxes that function to show/hide text as options are clicked on. I got this part down.
https://jsfiddle.net/n1Lcfm36/
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="red"){
$(".box").not(".red").hide();
$(".red").show();
}
else if($(this).attr("value")=="green"){
$(".box").not(".green").hide();
$(".green").show();
}
else if($(this).attr("value")=="blue"){
$(".box").not(".blue").hide();
$(".blue").show();
}
else{
$(".box").hide();
}
});
}).change();
});
When both boxes are used together, I'd like it to filter similar to how it does here: http://jsfiddle.net/g5cryt31/
$().ready(function() {
$('.selectSome').on('change', function() {
showHide();
});
});
function showHide() {
// hide all rows
$('.row').hide();
// show good row only
if ($('#select_category').val() != 'null' && $('#select_subject').val() != 'null') {
$('#row_' + $('#select_subject').val() + '_' + $('#select_category').val()).show();
}
}
Except, nothing happens when you try to view one box at a time there. They need to both be used to filter...
So, first box "Class", would show nothing at first. Then, you select a class from the dropdown and related classes appear below.
Second box, "Subject" would show nothing at first. Then, you select a Subject from the dropdown and related subjects appear below.
BUT when both are used together (I guess this would require a submit button?) they filter out similar to the second jsfiddle I posted.
I think I understand what you want,
Correct me if I'm wrong-
This will show all elements regarding class X or Subject Y.
If they are picked together it will show only X + Y.
This will do what you what:
$().ready(function() {
$('.selectSome').on('change', function() {
showHide();
});
});
function showHide() {
// hide all rows
$('.row').hide();
// show good row only
if ($('#select_category').val()!= 'null'){
//class selected - check if subject seleceted
if ($('#select_subject').val() != 'null'){
//class and subject selected use double selector
$('.' + $('#select_subject').val()+'.'+$('#select_category').val()).show();
}
else {
//only class selected - use category selector
$('.' + $('#select_category').val()).show();
}
}
else
if ($('#select_subject').val() != 'null'){
//only subject selected without class
$('.' + $('#select_subject').val()).show();
}
}
You will have to add "c1.. s1..." classes (or data-attr) and you can loose the id's
New html for rows:
<div class="row s1 c1">
Subject 1 for Class 1
</div>
<div class="row s2 c1">
Subject 2 for Class 1
</div>
<div class="row s1 c2">
Subject 1 for Class 2
</div>
<div class="row s2 c2">
Subject 2 for Class 2
</div>
<div class="row s3 c2">
Subject 3 for Class 2
</div>
<div class="row s3 c3">
Subject 3 for Class 3
</div>
Fiddle
I would throw out the IDs and just use data attributes. Then dynamically build the selector. Note the different definition on the row divs and the new showHide() function.
$().ready(function() {
$('.selectSome').on('change', function() {
showHide();
});
});
function showHide() {
// hide all rows
$('.row').hide();
// show good rows only
var cat = $('#select_category').val();
var sub = $('#select_subject').val();
var selector = "[class='row']";
if (cat !== 'null') {
selector += "[data-category='" + cat + "']";
}
if (sub !== 'null') {
selector += "[data-subject='" + sub + "']";
}
$(selector).show();
}
.row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="select_class">Class:
<select id="select_category" class="selectSome">
<option value="null">Please select...</option>
<option value="c1">Class 1</option>
<option value="c2">Class 2</option>
<option value="c3">Class 3</option>
</select>
</label>
<br/>
<label for="select_subject">Subject:
<select id="select_subject" class="selectSome">
<option value="null">Please select...</option>
<option value="s1">Subject 1</option>
<option value="s2">Subject 2</option>
<option value="s3">Subject 3</option>
</select>
</label>
<hr/>
<div class="row" data-subject="s1" data-category="c1">
Subject 1 for Class 1
</div>
<div class="row" data-subject="s2" data-category="c1">
Subject 2 for Class 1
</div>
<div class="row" data-subject="s1" data-category="c2">
Subject 1 for Class 2
</div>
<div class="row" data-subject="s2" data-category="c2">
Subject 2 for Class 2
</div>
<div class="row" data-subject="s3" data-category="c2">
Subject 3 for Class 2
</div>
<div class="row" data-subject="s3" data-category="c3">
Subject 3 for Class 3
</div>
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'));