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>
Wrote html code that changes the color of the page when selected from a drop down menu. In this assignment I must fix the "color" label so that when I click on it it brings up the selection of colors. I can't seem to find a way to accomplish this. I've tried to maybe wrap the the label tags in other tags but none seem to work.
function changeColor() {
const color = document.getElementById("colors").value;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4" >Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>
function changeColor() {
var e = document.getElementById("colors");
var color = e.options[e.selectedIndex].text;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4">Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>
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 want a script that will enable the Address and Department dropdowns when the Organisaion Name dropdown is selected.
my code:
$(document).ready(function() {
$('#Department1, #Address1').attr('disabled',true);
$('#Organisation1').keyup(function(){
if($(this).val().length !=0)
$('#Department1, #Address1').attr('disabled', false);
else
$('#Department1, #Address1').attr('disabled',true);
})
});
Here is the markup for the Department Field.
<div class="control-group">
<label class="control-label">Department</label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Department1" >
<button type="button" class="btn" href=""> Find</button>
</div>
<span class="help-inline"><i class="help" title="Enter the Department of this Opportunity.">Help</i></span>
</div>
</div>
FULL CODE
<style>
.schools-position{
position: relative;
top: 3px;
left: 3px;
}
.groups{
width: 100%;
}
.groups tr{
text-align: center;
}
.groups th{
border-top: 0;
background-color: #f0f0f0;
background-image: url(../../_assets/img/grid/header.png);
background-position: top left;
background-repeat: repeat-x;
font-size: 12px;
font-weight: 600;
padding: 0px 6px;
height: 28px;
line-height: 28px;
overflow: hidden;
}
</style>
<div class="uiModalHeader clearfix">
<h1 class="title jobs"><span class="light">Opportunities :</span> Sandwich</h1>
</div>
<form class="form form-horizontal">
<div class="uiModalBody clearfix">
<ul id="NewOpps_Tabs" class="nav nav-tabs" style="position:absolute;left:10px;right:10px;top:10px;">
<li class="active">
<i class="icon list"></i>General
</li>
</ul>
<div class="tab-content" style="position:absolute;bottom:10px;left:10px;right:10px;top:48px;border:#ddd 1px solid;border-top:0;padding:20px 20px;margin-bottom:0 !important;overflow-y:scroll;">
<fieldset>
<legend>About this Opportunity</legend>
<div class="control-group required">
<label class="control-label">Organisation Name <em>*</em></label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Organisation1">
<button type="button" class="btn" href=""> Find</button>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Department</label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge " id="Department1" >
<button type="button" class="btn" href=""> Find</button>
</div>
<span class="help-inline"><i class="help" title="Enter the Department of this Opportunity.">Help</i></span>
</div>
</div>
<div class="control-group">
<label class="control-label">Address</label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Address1" >
<button type="button" class="btn" href=""> Find</button>
</div>
<span class="help-inline"><i class="help" title="Enter the Address for this Opportunity.">Help</i></span>
</div>
</div>
<hr />
<div class="control-group">
<label class="control-label">Level</label>
<div class="controls">
<select class="input-xxlarge" id="Level">
<option>-- Please Select --</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>
<option value="PLCMNT">PLCMNT</option>
<option value="OTHER">OTHER</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Academic Year</label>
<div class="controls">
<select class="input-xxlarge" id="Academic Year">
<option>-- Please Select --</option>
<option value="2019/20">2019/20</option>
<optio vaue="2018/19">2018/19</optio>
<option value="2017/18">2017/18</option>
<option value="2016/17" selected="">2016/17</option>
<option value="2015/16">2015/16</option>
<option value="2014/15">2014/15</option>
<option value="2013/12">2013/12</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Vacancies</label>
<div class="controls">
<textarea rows="2" cols="20">
</textarea>
<span class="help-inline"><i class="help" title="Enter the Vacancies for this Opportunity.">Help</i></span>
</div>
</div>
<div class="control-group required">
<label class="control-label">Source<em>*</em></label>
<div class="controls">
<select class="input-xxlarge" id="Academic Year">
<option>-- Please Select --</option>
<option value="Student Found" selected="selected">Student Found</option>
<option value="University Found">University Found</option>
<option value="Alumni Relationship">Alumni Relationship</option>
<option value="School Relationship">School Relationship</option>
<option value="Found on Website">Found on Website</option>
</select>
</div>
</div>
<hr />
<div class="control-group required">
<label class="control-label">Job Title <em>*</em></label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Job-Title">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Job Description</label>
<div class="controls">
<div class="input-append input-prepend">
<textarea rows="5" class="input-xxlarge txtStage1">
</textarea>
</div>
</div>
</div>
<div class="control-group required">
<label class="control-label">Duration <em>*</em></label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Duration">
</div>
</div>
</div>
<div class="control-group required">
<label class="control-label">Duration Measure <em>*</em></label>
<div class="controls">
<select class="input-xxlarge" id="Duration-Measure">
<option>-- Please Select --</option>
<option value="Days">Days</option>
<option value="Weeks">Weeks</option>
<option value="Months">Months</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Salary</label>
<div class="controls">
<div class="input-append input-prepend">
<input type="text" class="input-xxlarge" id="Salary">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">Working Hours</label>
<div class="controls">
<div class="input-append input-prepend">
<textarea class="input-xxlarge">
</textarea>
</div>
</div>
</div>
<hr />
<div class="control-group">
<label class="control-label">Category</label>
<div class="controls">
<select class="input-xxlarge" id="Category">
<option>-- Please Select --</option>
<option value="1">Accountancy, Banking and Finance</option>
<option value="2">Animal and Plant Resource</option>
<option value="3">Business, Consulting and Management</option>
<option value="4">Charity and Voluntary Work</option>
<option value="5">Creative Arts and Design</option>
<option value="6">Energy and Utilities</option>
<option value="7">Engineering and Manufacturing</option>
<option value="8">Enviromemt amd Agriculture</option>
<option value="9">Healthcare</option>
<option value="10">Hospitality and Events Management</option>
<option value="11">Information, Research and Analysis</option>
<option value="12">Insurance and Pensions</option>
<option value="13">Law</option>
<option value="14">Law Enforcement and Security</option>
<option value="15">Leisure, Sport and Tourism</option>
<option value="16">Marketing, Advertising and PR</option>
<option value="17">Media and Internet</option>
<option value="18">Performing Arts</option>
<option value="19">Property and Construction</option>
<option value="20">Public Services and Administration</option>
<option value="21">Publishing and Journalism</option>
<option value="22">Recruitment and HR</option>
<option value="23">Retail</option>
<option value="24">Sales</option>
<option value="25">Science and Pharmaceuticals</option>
<option value="26">Social Care</option>
<option value="27">Teaching and Education</option>
<option value="28">Transport and Logistics</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Nearest Train or Tube Station</label>
<div class="controls">
<select class="input-xxlarge" id="Category">
<option>-- Please Select --</option>
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
</select>
</div>
</div>
<div class="control-group required">
<label class="control-label">Placement Type Offered<em>*</em></label>
<div class="controls">
<select class="input-xxlarge" id="Placment-Type-Offered">
<option>-- Please Select --</option>
<option value="Placement Year">Placement Year</option>
<option value="Internship">Internship</option>
<option value="Convention de Stage">Convention de Stage</option>
<option value="Work Study">Work Study</option>
<option value="Social Work 1">Social Work 1</option>
<option value="Social Work 2">Social Work 2</option>
<option value="Social Work 3">Social Work 3</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
<div class="uiModalButtons clearfix">
<div class="pull-right">
<div class="btn-group">
<button class="uiButton"><span class="icon cancel">Cancel</span></button>
</div>
<div class="btn-group">
<a class="uiAjaxModal" href="<?php echo $appurl; ?>../../Admin/Things2/stage2.php"><button class="uiButton"><span class="icon save">Next</span></button></a>
</div>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#Department1, #Address1').attr('disabled',true);
$('#Organisation1').change(function(){
if($(this).val() !='')
$('#Department1, #Address1').removeAttr('disabled');
else
$('#Department1, #Address1').attr('disabled','disabled');
});
});
$(document).ready(function() {
$(document).on("keypress", "#Organisation", function(){
if($("#Organisation").val() !=0 || $("#Organisation").val()!=NULL)
{
$("#Department").removeAttr("disabled");
$("#Address").removeAttr("disabled");
}
else
{
$("#Department").attr("disabled",true);
$("#Address").attr("disabled",true);
}
});
$('#Organisation1').select2({
data: [{
id: "1",
text: "Organisation 1"
}, {
id: "2",
text: "Organisation 2"
}, {
id: "3",
text: "Organisation 3"
}, {
id: "4",
text: "Organisation 4"
}],
multiple: false,
placeholder: '-- Please Select',
allowClear: true
});
$('#Department1').select2({
data: [{
id: "1",
text: "Department 1"
}, {
id: "2",
text: "Department 2"
}, {
id: "3",
text: "Department 3"
}, {
id: "4",
text: "Department 4"
}],
multiple: false,
placeholder: '-- Please Select',
allowClear: true
});
$('#Address1').select2({
data: [{
id: "1",
text: "Address 1"
}, {
id: "2",
text: "Address 2"
}, {
id: "3",
text: "Address 3"
}, {
id: "4",
text: "Address 4"
}],
multiple: false,
placeholder: '-- Please Select',
allowClear: true
});
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$('.schools-check').each(function() {
this.checked = true;
});
}
else {
$('.schools-check').each(function() {
this.checked = false;
});
}
});
$('.choose').on('click', function(e){
e.preventDefault();
$('.uiModalContent').html('').addClass('loading');
$.ajax({
url: $(this).attr('href'),
success: function(data) {
setTimeout(function(){
$('.uiModalContent').removeClass('loading');
$('.uiModalContent').html(data);
}, 500);
}
});
});
});
</script>
Here is the code for that entire modal
use removeAttr() instead of setting the disabled attr to false
$(document).ready(function() {
var els = $('#Department1, #Address1');
els.attr('disabled',true);
$('#Organisation1').change(function(){
$(this).val() ? els.removeAttr('disabled') : els.attr('disabled', '');
});
});
https://www.w3.org/TR/html5/infrastructure.html#boolean-attributes
The presence of a boolean attribute on an element represents the true
value, and the absence of the attribute represents the false value.
if Organization is select box then you can enable/disable based on organization select change:
$('#Organisation1').change(function(){
if($(this).val() !='')
$('#Department1, #Address1').removeAttr('disabled');
else
$('#Department1, #Address1').attr('disabled','disabled');
});
$('#Organisation1').blur(function() {
if ($(this).val() != '')
$('#Department1, #Address1').removeAttr('disabled')
else
$('#Department1, #Address1').attr('disabled', 'disabled');
})
How to style drop downs of drop down select boxes?
I have created a jsfiddle http://jsfiddle.net/CGDhB/
<div class="container">
<div class="salmatWrapper">
<div class="col-sm-12 contents">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
<div class="form">
<form class="form-horizontal">
<fieldset>
<div class="col-xs-6 left">
<!-- Enter Value-->
<div class="form-group">
<div class="col-xs-12">
<input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
</div>
</div>
<!-- Convert From -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom2" name="custom2" class="form-control">
<option value="" class="selectDefaultText">Convert From</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Convert To -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom3" name="custom3" class="form-control">
<option value="" class="selectDefaultText">Convert To</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 right">
<!-- Textarea -->
<div class="form-group">
<div class="col-xs-12">
<textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-sm-12">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
</div>
</div>
</div>
</div>
I want the drop downs to look as in below image
Basically I want that little icon and the drop down select boxes to look as that. I am confused with this. A staging link may be viewed from here http://bit.ly/1eNm3jv
You really can't style select. The only thing you can really do is border color and padding as far as I know. Probably font size as well. Like #setek mentioned, gonna have to use some kind of plugin.