I'm trying to code a dropdown menu that when a option is clicked, it displays a div with that options name, but I can't figure out how to do just that.
HTML:
<div class="wrapper">
<div class="menu">
<select id="type">
<option value="Gradients">Gradients</option>
<option value="Custom Color">Custom Color</option>
<option value="Custom Image/Video">Custom Image/Video</option>
</select>
</div>
</div>
<div class="content">
<div id="Gradients" class="data">
<h1>gradient</h1>
</div>
<div id="Custom Color" class="data">
<h1>color</h1>
</div>
<div id="Custom Image/Video" class="data">
<h1>image/video</h1>
</div>
</div>
maybe you could try to set the style.display property to block
I hope this will help you
const dropMenu = document.querySelector('#type'),
sections = document.querySelectorAll('.data');
dropMenu.addEventListener('change', function handleChange(event) {
sections.forEach(section => {
section.classList.remove('active');
document.querySelector('#' + event.target.value).classList.add('active');
});
});
.data {
display: none;
}
.data.active {
display: block;
}
<div class="wrapper">
<div class="menu">
<select id="type">
<option value="">--Select--</option>
<option value="Gradients">Gradients</option>
<option value="Custom-Color">Custom Color</option>
<option value="Custom-Image">Custom Image/Video</option>
</select>
</div>
</div>
<div class="content">
<div id="Gradients" class="data">
<h1>gradient</h1>
</div>
<div id="Custom-Color" class="data">
<h1>color</h1>
</div>
<div id="Custom-Image" class="data">
<h1>image/video</h1>
</div>
</div>
Related
I have two drop down from two different array.
i want to get/store selected value from drop down. so that i can pass/send selected value in submit button (href)
Example:supoose user select email as 123 and center as "training",so i need to pass thoes two value in submit button like below-
<main role="main">
<div class="row">
<div class="col-md-12">
<h4 class="heading-theme page-header pdt">Create Email Template</h4>
<span class="border-bottom display-block mb-20"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-12 mb-1">
<select class="custom-select" id="status" title="Status">
<option value="" selected>Select Template</option>
<?php
foreach ($emailTemplate as $row) {
?>
<option value="<?= $row['temp_desc'] ?>"><?= $row['temp_desc'] ?></option>
<?php
}
?>
</select>
</div>
<div class="col-lg-3 col-md-12 mb-1">
<select class="custom-select" id="status" title="Status">
<option value="" selected>Select Center</option>
<?php
foreach ($trainingCenter as $row) {
?>
<option value="<?= $row['organization_name'] ?>"><?= $row['organization_name'] ?></option>
<?php
}
?>
</select>
</div>
<div class="col-lg-4"></div>
</div>
<div>
<div class="row">
<div class="col-md-12">
<div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 ">
Submit
</a>
</div>
</div>
</div>
</main>
You can get both selected values using each loop inside some variable then split that values and finally add them to href of your tag.
Demo Code :
$("select").on("change", function() {
var values = "";
//traverse through all selects
$(".status").each(function() {
//separate values using "."
values += $(this).val() + ".";
})
//split values
var new_values = values.split(".");
var select_text= $('#status :selected').text();//getting selected text
$new_href = "/Mycenter/testmailtemplate/" + new_values[0] + "/" + new_values[1]+"/"+ select_text;
//add value to your href
$(".pri-btn").attr("href", $new_href)
console.log($new_href)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div class="row">
<div class="col-md-12">
<h4 class="heading-theme page-header pdt">Create Email Template</h4>
<span class="border-bottom display-block mb-20"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-12 mb-1">
<!--added class="status"-->
<select class="custom-select status" id="status" title="Status">
<option value="" selected>Select Template</option>
<option value="1">1th</option>
<option value="2">2th</option>
<option value="3">3th</option>
</select>
</div>
<div class="col-lg-3 col-md-12 mb-1">
<!--added class="status"-->
<select class="custom-select status" title="Status">
<option value="" selected>Select Center</option>
<option value="1">
1</option>
<option value="2">
2</option>
<option value="3">3
</option>
</select>
</div>
<div class="col-lg-4"></div>
</div>
<div>
<div class="row">
<div class="col-md-12">
<div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 ">
Submit
</a>
</div>
</div>
</div>
</main>
$(".custom-select").on("change", function() {
var value1 = $("#status1").val();
var value2 = $("#status2").val();
var url = '/Mycenter/testmailtemplate/'+value1+'/'+value2;
$(".pri-btn").attr("href", url );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main role="main">
<div class="row">
<div class="col-md-12">
<h4 class="heading-theme page-header pdt">Create Email Template</h4>
<span class="border-bottom display-block mb-20"></span>
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-12 mb-1">
<!--added class="status"-->
<select class="custom-select status" id="status1" title="Status">
<option value="" selected>Select Template</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-lg-3 col-md-12 mb-1">
<!--added class="status"-->
<select class="custom-select status" id="status2" title="Status">
<option value="" selected>Select Center</option>
<option value="1">
1</option>
<option value="2">
2</option>
<option value="3">3
</option>
</select>
</div>
<div class="col-lg-4"></div>
</div>
<div>
<div class="row">
<div class="col-md-12">
<div class="mt-2"><a href=" /Mycenter/testmailtemplate/value1/value2" class="text-default btn btn-sm pri-btn pt-2 mr-3 ">
Submit
</a>
</div>
</div>
</div>
</main>
I have put together the following code that will unhide <div>s if "Override" is selected from the dropdown. The problem I am having is that to select Override, then select another reason, then select override again for it to work as intended.
My goal is to have it unhidden when it gets selected for the first time.
HTML:
<body>
<div class="main">
<div class="row">
<!-- Begin left side data entry -->
<form> <!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
<div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 145px;">
<div class="row">
<div class="cell">1. Reason for Interuption </div>
<label>
<select class="cell" id="Q1" onChange="showQuest(this.value); store_value('Q1',this.value);">
<option value=""></option>
<option value="Call">Call</option>
<option value="Argument">Argument</option>
<option value="Sleep">Sleep</option>
<option value="Override">Override</option>
</select>
</label>
</div>
<div class="row" id="hidden8" style="display:none">
<div class="cell" id="Q8" >8. If Override, Override Approved by </div>
<div class="cell"><input type="text" id="A8" /></div>
</div>
</div>
</form>
</div>
</div>
</body>
JavaScript I have put together:
//function to unhide questions if Override is selected
function showQuest(sel)
{
if (sel == 'Override')
{
document.getElementById('Q1').addEventListener('change', function () {
var style = this.value == 'Override' ? 'block' : 'none';
document.getElementById('hidden8').style.display = style;
document.getElementById('hidden9').style.display = style;
});
}
}
I am not receiving any error messages when I load it into a browser and the code acts the same when I have it in JSFiddle.
Any help would be greatly appreciated.
The first time you call showQuest, you just add the event listener, and it is called the second time. Take the addEventListener outside the function:
//function to unhide questions if Override is selected
document.getElementById('Q1').addEventListener('change', function() {
var style = this.value == 'Override' ? 'block' : 'none';
document.getElementById('hidden8').style.display = style;
});
<div class="main">
<div class="row">
<!-- Begin left side data entry -->
<form>
<!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
<div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 145px;">
<div class="row">
<div class="cell">1. Reason for Interuption </div>
<select class="cell" id="Q1">
<option value=""></option>
<option value="Call">Call</option>
<option value="Argument">Argument</option>
<option value="Sleep">Sleep</option>
<option value="Override">Override</option>
</select>
</div>
<div class="row" id="hidden8" style="display:none">
<div class="cell" id="Q8">8. If Override, Override Approved by </div>
<div class="cell"><input type="text" id="A8" /></div>
</div>
</div>
</form>
</div>
</div>
The following template is for a continuous form. It is almost perfect on the mobile device. it uses bootstrap classes that I am just introducing myself for. On the computer the form is taking way too much space. I need to:
1. reduce the space it takes on bigger devices
2. reduce the padding for each row without making it look funny .. notice online wrap1 and wrap2 classes
3. I need the to control the width of the hours text boxes
4. make it look fine on all devices
Thanks my code follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="Trade Mark Icon" href="images/cp.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.stickitdown {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: light-grey;
color: white;
text-align: center;
}
.ScaleDownNeverUpImage
{
max-width: 100%;
height: auto;
}
.table
{
width: 100%
}
.trhover:hover td {
background-color: #ffff99; color: #000;
}
.trselected td {
background-color: #90EE90;
color: blue;text-decoration: underline dotted blue;
}
.trselected:hover td {
background-color: #ffff99; color: #000;
}
.wrap {
padding:28px;
background-color: #f5f5dc;
border: 1px solid #DDD;
vertical-align: middle;
}
.wrap2 {
padding:28px;
background-color: #eee8aa;
border: 1px solid #DDD;
vertical-align: middle;
}
</style>
<script language="JavaScript" type="text/javascript">
function toProcessTimesheet() {
var flagIt = "0"
if (flagIt == "0") {
document.toManageTimeSheetsMain.submit()
}
}
</script>
<title>Trade Mark ℠ Mobile Quick Add</title>
</head>
<body >
<div class="container">
<div class="page-header">
<img border="0" src="../images/Logoz.gif" title="Trade Mark Logo" alt="Trade Mark Logo" class="ScaleDownNeverUpImage"/>
<p> <font style="font-size:medium">Trade Mark ℠ Mobile Quick Add</font></p>
</div>
<div class="form-group row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="row" >
<div > <font style="font-size:3vw; font-weight:bold">Add Timesheet for Jason Supreme PP 09/30/18 </font></div>
</div>
<!---- row ------>
<div class="row">
<div class="wrap">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-1">
Job
</div>
<div class="col-sm-3">
<select id="job_id1" name="job_id1" class="mdb-select md-form" >
<option value="588" >1st Job </option>
<option value="295" >2nd Job </option>
<option value="42" >3rd Job </option>
</select>
</div>
</div>
</div>
<!--------here it goes -------->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
Date
</div>
<div class="col-sm-2">
<select id="wlDate1" name="wlDate1" class="mdb-select md-form">
<option value="9/16/2018 "> 9/16/2018 </option>
<option value="9/17/2018 "> 9/17/2018 </option>
<option value="9/18/2018 "> 9/18/2018 </option>
<option value="9/19/2018 "> 9/19/2018 </option>
<option value="9/20/2018 "> 9/20/2018 </option>
<option value="9/21/2018 "> 9/21/2018 </option>
<option value="9/22/2018 "> 9/22/2018 </option>
<option value="9/23/2018 "> 9/23/2018 </option>
<option value="9/24/2018 "> 9/24/2018 </option>
<option value="9/25/2018 "> 9/25/2018 </option>
<option value="9/26/2018 "> 9/26/2018 </option>
<option value="9/27/2018 "> 9/27/2018 </option>
<option value="9/28/2018 "> 9/28/2018 </option>
<option value="9/29/2018 "> 9/29/2018 </option>
<option value="9/30/2018 "> 9/30/2018 </option>
</select>
</div>
</div>
</div>
<!--------here it ends -------->
<!--------here it goes -------->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
Hours
</div>
<div class="col-sm-2">
<input type="text" value="08.00" name="hours1" id="hours1" maxlength="8" class="mdb-select md-form" " />
</div>
</div>
</div>
<!--------here it ends -------->
</div>
</div>
<!---- row ends ----->
<!---- row ------>
<div class="row">
<div class="wrap2">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-1">
Job
</div>
<div class="col-sm-3">
<select id="job_id2" name="job_id2" class="mdb-select md-form" >
<option value="588" >1st Job </option>
<option value="295" >2nd Job </option>
<option value="42" >3rd Job </option>
</select>
</div>
</div>
</div>
<!--------here it ends -------->
<!--------here it goes -------->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
Date
</div>
<div class="col-sm-2">
<select id="Select1" name="wlDate1" class="mdb-select md-form">
<option value="9/16/2018 "> 9/16/2018 </option>
<option value="9/17/2018 "> 9/17/2018 </option>
<option value="9/18/2018 "> 9/18/2018 </option>
<option value="9/19/2018 "> 9/19/2018 </option>
<option value="9/20/2018 "> 9/20/2018 </option>
<option value="9/21/2018 "> 9/21/2018 </option>
<option value="9/22/2018 "> 9/22/2018 </option>
<option value="9/23/2018 "> 9/23/2018 </option>
<option value="9/24/2018 "> 9/24/2018 </option>
<option value="9/25/2018 "> 9/25/2018 </option>
<option value="9/26/2018 "> 9/26/2018 </option>
<option value="9/27/2018 "> 9/27/2018 </option>
<option value="9/28/2018 "> 9/28/2018 </option>
<option value="9/29/2018 "> 9/29/2018 </option>
<option value="9/30/2018 "> 9/30/2018 </option>
</select>
</div>
</div>
</div>
<!--------here it ends -------->
<!--------here it goes -------->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
Hours
</div>
<div class="col-sm-2">
<input type="text" value="08.00" name="hours2" id="hours2" maxlength="8" class="mdb-select md-form" " />
</div>
</div>
</div>
<!--------here it ends -------->
</div>
</div>
<!---- row ends ----->
<!---- row ------>
<div class="row">
<div class="wrap">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-1">
Job
</div>
<div class="col-sm-3">
<select id="job_id3" name="job_id3" class="mdb-select md-form" >
<option value="588" >1st Job </option>
<option value="295" >2nd Job </option>
<option value="42" >3rd Job </option>
</select>
</div>
</div>
</div>
<!--------here it goes -------->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
Date
</div>
<div class="col-sm-2">
<select id="wlDate13" name="wlDate13 class="mdb-select md-form">
<option value="9/16/2018 "> 9/16/2018 </option>
<option value="9/17/2018 "> 9/17/2018 </option>
<option value="9/18/2018 "> 9/18/2018 </option>
<option value="9/19/2018 "> 9/19/2018 </option>
<option value="9/20/2018 "> 9/20/2018 </option>
<option value="9/21/2018 "> 9/21/2018 </option>
<option value="9/22/2018 "> 9/22/2018 </option>
<option value="9/23/2018 "> 9/23/2018 </option>
<option value="9/24/2018 "> 9/24/2018 </option>
<option value="9/25/2018 "> 9/25/2018 </option>
<option value="9/26/2018 "> 9/26/2018 </option>
<option value="9/27/2018 "> 9/27/2018 </option>
<option value="9/28/2018 "> 9/28/2018 </option>
<option value="9/29/2018 "> 9/29/2018 </option>
<option value="9/30/2018 "> 9/30/2018 </option>
</select>
</div>
</div>
</div>
<!--------here it ends -------->
<!--------here it goes -------->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
Hours
</div>
<div class="col-sm-2">
<input type="text" value="08.00" name="hours3" id="hours3" maxlength="8" style="width:25;" class="mdb-select md-form" " />
</div>
</div>
</div>
<!------- link ------>
<!---- link ends ---->
<!--------here it ends -------->
</div>
</div>
<!---- row ends ----->
</div>
</div>
</body>
</html>
change warp byrow
it will look wider and more centered
<div class="warp">
<div class="row">
...
</div>
</div>
and
reduces the warp padding
You can also add media queries to your CSS code.
#media (min-width: 768px) {
/* Now only screens with a width over 768px are affected */
.table {
width: 70%;
}
}
Like that you can edit specific CSS Blocks.
I'm trying to filter the divs below .row-body to only show when the .sessionactivity text matches the selected text from the select dropdown. So in the example below the second .row-body div would be removed, see jQuery...
<select class="select-activity">
<option>Activity One</option>
<option>Activity Two</option>
<option>Activity Three</option>
</select>
<div id="today">
<div class="row-body">
<div class="sessionactivity">Activity One</div>
<div class="sessionlocation">The Swimming Pool</div>
</div>
<div class="row-body">
<div class="sessionactivity">Activity Two</div>
<div class="sessionlocation">The Main Hall</div>
</div>
</div>
In the jQuery I've added the string 'Activity One' but I need that to come dynamically from the select selected text which is where I'm stuck.
$('.select-activity').click(function() {
$('.sessionactivity').filter(function() {
return $.trim($(this).text()) !== 'Activity One';
}).parent().remove();
});
After some research the following snippet seems to be the way to go but I'm struggling to put it into context. Any help would be great!
$(".select-actvity").children("option").filter(":selected").text()
You can avoid using filter() and simply use :contains() to check the content of the div with the selected text:
$(".select-activity").click(function() {
var text = $.trim($('.select-activity option:selected').text());
$('.row-body').hide();
$('.row-body').find('div:contains('+text+')').parent().show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-activity">
<option>Activity One</option>
<option>Activity Two</option>
<option>Activity Three</option>
</select>
<div id="today">
<div class="row-body">
<div class="sessionactivity">Activity One</div>
<div class="sessionlocation">The Swimming Pool</div>
</div>
<div class="row-body">
<div class="sessionactivity">Activity Two</div>
<div class="sessionlocation">The Main Hall</div>
</div>
<div class="row-body">
<div class="sessionactivity">Activity Three</div>
<div class="sessionlocation">The Main Hall</div>
</div>
</div>
You are missing a "<" sign infront of option>Activity One</option>
<select class="select-activity">
<option>Activity One</option>
<option>Activity Two</option>
<option>Activity Three</option>
</select>
<div id="today">
<div class="row-body">
<div class="sessionactivity">Activity One</div>
<div class="sessionlocation">The Swimming Pool</div>
</div>
<div class="row-body">
<div class="sessionactivity">Activity Two</div>
<div class="sessionlocation">The Main Hall</div>
</div>
</div>
jQuery
$( ".select-activity" ).change(function() {
var selected=$(this).val();
$('.sessionactivity').filter(function(){
return $.trim($(this).text()) !==selected;
}).parent().remove();
});
Here is how you can do it.
you can get selected values by $(this).val() in change event of dropdown.
And at the end manually triggering change event by calling $(".select-activity").change(); for initial selection.
$(".select-activity").change(function() {
let filterVal = $(this).val();
$('.row-body').hide();
$('.sessionactivity').filter(function() {
return $.trim($(this).text()) === filterVal;
}).parent().show();
});
$(".select-activity").change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-activity">
<option value="Activity One">Activity One</option>
<option value="Activity Two">Activity Two</option>
<option value="Activity Three">Activity Three</option>
</select>
<div id="today">
<div class="row-body">
<div class="sessionactivity">Activity One</div>
<div class="sessionlocation">The Swimming Pool</div>
</div>
<div class="row-body">
<div class="sessionactivity">Activity Two</div>
<div class="sessionlocation">The Main Hall</div>
</div>
<div class="row-body">
<div class="sessionactivity">Activity Three</div>
<div class="sessionlocation">The Other Hall</div>
</div>
</div>
Given that I have the following html markup:
<div class="container">
<div id="divOne">One div</div>
<div id="divTwo">
<span id="spanTwo">
<label>Input two:</label>
<input type="text" id="inputTwo" />
</span>
</div>
<div id="divthree">
<p>
<label>selectOne</label>
<span id="spanSelectOne">
<select id="selectOne">
<option value="opt1">Opt1</option>
<option value="opt2">Opt2</option>
</select>
</span>
<span id="spanSelectTwo">
<select id="selectOne">
<option value="opt01">Opt01</option>
<option value="opt02">Opt02</option>
</select>
</span>
</p>
</div>
</div>
How can I make div id="divTwo" and div id="divthree" appear on the same line? First divthree and then divTwo, using jQuery or css?
Update:
I can't add divs or other elements to the html code, it is rendered like that and I can only change it using js or css.
Change the display property to make them appear inline.
#divTwo, #divthree {
display: inline-block;
}
#divTwo, #divthree {
display: inline-block !important;
}
I updated my answer.
I use jQuery to append new div
var $newdiv1 = $( "<div class='selectInput'></div>"),
existingdiv2 = document.getElementById( "divTwo" ),
existingdiv3 = document.getElementById( "divthree" );
$( ".container" ).append( $newdiv1);
$( ".selectInput" ).append( [ existingdiv3, existingdiv2 ] );
.selectInput{
display: flex;
}
#divthree{
margin-right: 20px;
}
#divTwo{
margin: auto 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="divOne">One div</div>
<div id="divTwo">
<span id="spanTwo">
<label>Input two:</label>
<input type="text" id="inputTwo" />
</span>
</div>
<div id="divthree">
<p>
<label>selectOne</label>
<span id="spanSelectOne">
<select id="selectOne">
<option value="opt1">Opt1</option>
<option value="opt2">Opt2</option>
</select>
</span>
<span id="spanSelectTwo">
<select id="selectOne">
<option value="opt01">Opt01</option>
<option value="opt02">Opt02</option>
</select>
</span>
</p>
</div>
</div>
JS Fiddle link for this code