Multiple Dropdowns with Button - html

I currently have two dropdown boxes, I was wondering if someone can assist on how I can join the two output values into one sentence, once the user presses a button.
This is the code I am currently working with:
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<select id="selectcars" name="cars">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<div class="text-for-car" id="volvo">Your text for "Volvo"</div>
<div class="text-for-car" id="saab">Your text for "Saab"</div>
<div class="text-for-car" id="fiat">Your text for "Fiat"</div>
<div class="text-for-car" id="audi">Your text for "Audi"</div>
<style>
.text-for-car {display: none;}
#volvo {display: block;}
</style>
<script>
document.getElementById("selectcars").addEventListener("change", function () {
var id = this.options[this.selectedIndex].value;
var texts = document.getElementsByClassName("text-for-car");
for (var i = 0; i < texts.length; i++) {
if (texts[i].id == id) texts[i].style.display = "block";
else texts[i].style.display = "none";
}
})
</script>
<form>
<select id="selectcars2" name="cars2">
<option value="volvo2" selected>Volvo</option>
<option value="saab2">Saab</option>
<option value="fiat2">Fiat</option>
<option value="audi2">Audi</option>
</select>
</form>
<div class="text-for-car2" id="volvo2">Your text for "Volvo"</div>
<div class="text-for-car2" id="saab2">Your text for "Saab"</div>
<div class="text-for-car2" id="fiat2">Your text for "Fiat"</div>
<div class="text-for-car2" id="audi2">Your text for "Audi"</div>
<style>
.text-for-car2 {display: none;}
#volvo2 {display: block;}
</style>
<script>
document.getElementById("selectcars2").addEventListener("change", function () {
var id2 = this.options[this.selectedIndex].value;
var texts2 = document.getElementsByClassName("text-for-car2");
for (var i = 0; i < texts2.length; i++) {
if (texts2[i].id == id2) texts2[i].style.display = "block";
else texts2[i].style.display = "none";
}
})
</script>
</body>
</html>
Any help ? Thanks in advance!

Your demo is a bit long and I don't want to separate everything, but I made a quick demo there that should help you with your question.
http://codepen.io/paulcredmond/pen/JRxqPG
<label for="car">Car</label>
<select id="car">
<option value="Ford">Ford</option>
<option value="Fiat">Fiat</option>
<option value="Volvo">Volvo</option>
</select>
<label for="engine">Engine</label>
<select id="engine">
<option value="1.4 Petrol">1.4 Petrol</option>
<option value="1.6 Petrol">1.6 Petrol</option>
<option value="2.0 TDI">2.0 TDI</option>
</select>
<p>You have chosen a <span class="car">Ford </span> with a <span class="engine">1.4 Petrol</span> engine.</p>
$('#car').on('change', function() {
var s = $(this).val();
console.log(s);
$('p .car').text(s);
});
$('#engine').on('change', function() {
var s = $(this).val();
console.log(s);
$('p .engine').text(s);
});

Related

How would one calculate the exact height/width of a text with html/css/jquery?

We ultimately want to give the clients the choice of "Max letter height", so they can pick between 5cm, 10cm, 15cm, 20cm, etc. By choosing a letter height, the visual example should adjust accordingly (although it'll have to work in scale because I wouldn't want the text to go off-screen). Once a height is selected, the client can enter their text which should automatically start calculating the width from pixels to centimeters.
In the prototype I built, I got most of it to work but the pixels to centimeters aren't exact but I have no idea what to do to make it any better. My prototype can be found here: https://codepen.io/Crownedpride/pen/d6b6973f458ecc0c60ed59b4bcfb5acd (pardon the Dutch language!)
Please let me know if I'm unclear or not, I've been trying to make this work for way too long and I'm stuck like a rock. One last thing, there's some other code within my codepen because I'm trying to turn this into a system that'll calculate a price based on the width/height of the text.
function priceCalc() {
// var cmHeight = $('.character-height-container').toCentimeters();
var cmLength = $('#characters').toCentimeters();
$('#output').text('Width: ' + cmLength.width + ' CM ' +
'Height: ' + cmLength.height + ' CM');
if(cmLength.width == 0){
$('#price').text("0");
} else if(cmLength.width < 50){
$('#price').text("30");
} else if(cmLength.width < 100){
$('#price').text("45");
} else if(cmLength.width < 150){
$('#price').text("60");
} else if(cmLength.width < 200){
$('#price').text("75");
} else if(cmLength.width < 250){
$('#price').text("90");
} else if(cmLength.width < 300){
$('#price').text("105");
} else if(cmLength.width < 350){
$('#price').text("120");
} else if(cmLength.width < 400){
$('#price').text("135");
} else if(cmLength.width < 450){
$('#price').text("150");
} else if(cmLength.width > 451){
$('#price').text("165");
};
}
(function($) {
$.fn.toCentimeters = function() {
var element = this,
width = parseInt(element.innerWidth()),
// width = parseInt(element.css('width')),
height = parseInt(element.innerHeight()),
// height = parseInt(element.css('height')),
centimeters = {};
centimeters.width = (width * 0.035 ); //-- scale
centimeters.height = (height * 0.02645833333333);
return centimeters;
};
}
)(jQuery);
$(function() {
var price = 0;
priceCalc();
});
$(function() {
$('#input-test').keyup(function() {
$('#characters').text($(this).val());
$('#total-characters').text($(this).val().length);
// var a = $('#breedte').text(($(this).val().length * 25));;
// $('#price').text(($(this).val().length * 25 * 0.70));
$inputs.each(applyStyles);
priceCalc();
});
});
var $target = $('#characters'),
$inputs = $('.mystyle :input'),
$target2 = $('#custom-text-container'),
$inputs2 = $('.my-background-style :input'),
applyStyles = function() {
$target.css(this.name, this.value);
$target2.css(this.name, this.value);
};
$inputs.on('keyup click change', function() {
$inputs.each(applyStyles);
$inputs2.each(applyStyles);
priceCalc();
});
$inputs2.on('keyup click change', function() {
$inputs.each(applyStyles);
$inputs2.each(applyStyles);
priceCalc();
});
/* #breedte:after {
content:" cm breedt";
} */
body {
text-align:center;
font-family:Arial;
}
#total-characters:after {
content:" karakters"
}
#price:before {
content:"€ ";
}
#price {
font-size:36px;
color:green;
font-weight:bold;
}
.character-height-container {
height:36px;
display:block;
margin:0px;
padding:0px;
/* background-color:#ed7703; */
}
#characters {
display:inline-block;
font-size:40px;
font-family:'arial';
overflow:hidden;
color:#333;
line-height:40px;
background-color:;
margin:0px;
padding:0px;
height:;
vertical-align:text-bottom;
}
#custom-text-container {
border:2px solid #c3c3c3;
padding:10px;
min-height:51px;
background-color:;
text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-characters">
<div id="custom-text-container">
<div class="character-height-container">
<p id="characters"></p>
</div>
</div>
<p id="total-characters">0</p>
</div>
<!-- <div class="display-characters">
<div id="custom-text-container">
<p id="characters"></p>
</div>
<p id="total-characters">0</p>
</div> -->
<div class="display-price">
<p id=output>Width: 0 cm Height: 0cm</p>
<p id="breedte"></p>
<p id="price">0</p>
</div>
<form action="">
<label for="test">Vul hier je tekst in</label>
<input type="text" class="text" id="input-test"><br><br>
<div class="mystyle">
<label for="font-size">Letter hoogte: </label>
<select name="font-size" id="font-size">
<option name="font-size" value="40px">40 px</option>
<option name="font-size" value="60px">60 px</option>
<option name="font-size" value="80px">80 px</option>
</select><br><br>
<label for="font-family">Kies een font: </label>
<select name="font-family" id="font-family">
<option name="font-family" value="arial">Arial</option>
<option name="font-family" value="arial black">Arial Black</option>
<option name="font-family" value="Helvetica Neue">Helvetica Neue</option>
<option name="font-family" value="courier">Courier</option>
<option name="font-family" value="Verdana">Verdana</option>
</select><br><br>
<label for="color">Kies een letter kleur: </label>
<select name="color" id="color">
<option name="color" value="Black">Black</option>
<option name="color" value="White">White</option>
<option name="color" value="Red">Red</option>
<option name="color" value="#ed7703">Oranje</option>
<option name="color" value="Green">Green</option>
<option name="color" value="Yellow">Yellow</option>
<option name="color" value="Blue">Blue</option>
</select>
</div><br>
<div class="my-background-style">
<label for="background-color">Kies een achtergrond kleur: </label>
<select name="background-color" id="background-color">
<option name="background-color" value="White">White</option>
<option name="background-color" value="Black">Black</option>
<option name="background-color" value="#f2edd3">Beige</option>
<option name="background-color" value="#d3ecf2">Licht blauw</option>
<option name="background-color" value="#f2d3ed">Licht roze</option>
<option name="background-color" value="#ad3434">Donker rood</option>
</select>
</div>
</form>

mouseleave is triggered on <select> when the cursor moves to the options inside in Firefox

I have 2 <select> inside a hidden <div> which is revealed by a hover function in jQuery. The problem is that once the <div> is visible, if I click on any of the <select>s and move the cursor to the options inside, they collapse this <div> making it impossible to interact with them. This is an issue that I've been experiencing only in Firefox.
If anyone can give me a clue of what's causing the problem that'd be greatly appreciated.
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').hover(mouseEnter, mouseLeave);
function mouseEnter() {
$(".options-container").show(200);
};
function mouseLeave() {
$(".options-container").hide(200);
};
</script>
This is the reported issue in firefox. However I have made few changes on mouseleave event and also have updated the functions and now it will work fine on any browser also in firefox.
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').mouseenter(function() {
$('.options-container').show(200);
});
$('#tester-container').on('mouseleave', function(event) {
if ($('.options-container').has(event.target).length > 0) {
event.stopPropagation();
return;
} else {
$('.options-container').hide(200);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>

MaterializeCSS Select Background Color

I tried the background color of the MaterializeCSS select. I attempted to use this question, but it did not work Change select box option background color as it was for regular HTML (no Materialize).
How could I do this?
It has to do with Materialize's selectors. The below code worked for me:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="input-field col s12">
<select class="select1">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
<style>
input.select-dropdown {
background: #1A1B1C !important;
color: #26a69a;
}
ul.dropdown-content.select-dropdown li span {
background: #1A1B1C;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
</script>

want to show image/icons in dropdown list

I want to display images in dropdown... I'm using tag for this purpose, but it won't show the images...
HTML Code:-
<label for="event_icon">Choose Icon: </label>
<select name="event_icon" id="event_icon">
<option>Select An Icon</option>
<option value="vaisakhi.jpg"><img src="icons/vaisakhi.jpg" width="20px" height="20px"/></option>
<option value="cake.png"><img src="icons/cake.png" width="20px" height="20px"/></option>
<option value="game.png"><img src="icons/game.png" width="20px" height="20px"/></option>
</select>
html:
<select name="event_icon" id="event_icon">
<option>Select An Icon</option>
<option value="vaisakhi.jpg" data-style="background-image: url('icons/vaisakhi.jpg');"></option>
<option value="cake.png" data-style="background-image: url('icons/cake.png');"></option>
<option value="game.png" data-style="background-image: url('icons/game.png');"></option>
</select>
script:
<script>
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", {text: item.label});
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#event_icon")
.iconselectmenu()
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons avatar");
});
</script>
You can try this
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>

How to add a class to a div on a certain option value

I was wondering how to add a class to a div if the option has the value selected. For example I'm making a website for my cousin's business, we want an easy way to shuffle through menus.
<code>
<div id="select"><form>
Menu:
<select name="select" class="form-control">
<option value="drinks">Drinks</option>
<option value="breakfast">Breakfast</option>
</select>
<input type="submit" value="Submit">
</form>
</code>
I would like if the value is breakfast to hide the div drinks and show the div breakfast, and also have it reversible. Thank you here's my code on JSFiddle http://jsfiddle.net/t5R9s/
Here it is
$(document).ready(function() {
$(".form-control").change(function() {
if($(this).val() == "drinks") {
$("#drinks").show();
$("#breakfast").hide();
} else {
$("#drinks").hide();
$("#breakfast").show();
}
});
});
Here is the FIDDLE.
You can use javascript. Do you want to do it when you hit submit or just after you make the selection?
[
Fiddle
]
<script type="text/javascript">
function changeClass(){
var myVariable = document.getElementById('control').value;
if(myVariable == "drinks"){
document.getElementById('drinks').className = "";
document.getElementById('breakfast').className = "hide";
}
else if(myVariable == "breakfast"){
document.getElementById('drinks').className = "hide";
document.getElementById('breakfast').className = "";
}
}
</script>
<div id="select">
<form>Menu:
<select name="select" class="form-control" id="control" onChange="changeClass()">
<option value="drinks">Drinks</option>
<option value="breakfast">Breakfast</option>
</select>
</form>
</div>
<div id="drinks">
<h2 align="center">Drinks</h2>
<table width="888" border="" cellpadding="9" class="">..</table>
</div>
<!--Breakfast table-->
<div id="breakfast" class="hide">
<h2 align="center">Breakfast</h2>
<table width="888" border="" cellpadding="9" class="">..</table>
</div>