I have a div "businessmodel" with some html element inside that is hidden by default and I want it to display when the option selected in the select option "accounttype" is provider.
Please see the code here:
JavaScript
<script type="text/javascript">
$('#accounttype').bind('change', function(event) {
var i= $('#accounttype').val();
if(i=="0")
{
$('#businessmodel').hide();
}
elseif(i=="1")
{
$('#businessmodel').show();
}
});
</script>
HTML
Account Type
<select name="type" required="" class='selector' id="accounttype" onchange="change(this)">
<option value='0'>User</option>
<option value='1'>Provider</option>
</select>
<div id="businessmodel" style="display:none;">
<p id="modellevel" >Business model</p>
<select name="model" required="" class='selector' id="model">
<option value='choose' >Choose Business Model</option>
<option value='ALPHA' >ALPHA</option>
<option value='Thecla'>Thecla</option>
<option value='Sixtus'>Sixtus</option>
<option value='Marthar'>Marthar</option>
<option value='Alma' >Alma</option>
<option value='Manuel'>Manuel</option>
<option value='Dum'>Dum</option>
<option value='Gech'>Gech</option>
<option value='Alba'>Hika</option>
<option value='Win'>Win</option>
<option value='Rex'>Rex</option>
<option value='Hika'>Hika</option>
</select>
</div>
Try this
<script type="text/javascript">
$(document).ready(function() {
$('select').change(function () {
$('.business').toggleClass('hide');
});
});
</script>
<style type="text/css">
.accounttype {
border: 1px solid;
margin: 5px;
padding: 10px;
}
.business {
border: 1px solid;
margin: 5px;
padding: 10px;
}
.hide {
display: none;
}
</style>
<div class="accounttype">
Show business model :
<select>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="business hide">
Some content goes here
</div>
Try this code.
$('#accounttype').on('change', function() {
var i = this.value;
if(i=="0")
{
$('#businessmodel').hide();
}
else
{
$('#businessmodel').show();
}
}
<select name="type" required="" class='selector' id="accounttype">
<option value='0'>User</option>
<option value='1'>Provider</option>
</select>
<div id="businessmodel" >
<p id="modellevel" >Business model</p>
<select name="model" required="" class='selector' id="model">
<option value='choose' >Choose Business Model</option>
<option value='ALPHA' >ALPHA</option>
<option value='Thecla'>Thecla</option>
<option value='Sixtus'>Sixtus</option>
<option value='Marthar'>Marthar</option>
<option value='Alma' >Alma</option>
<option value='Manuel'>Manuel</option>
<option value='Dum'>Dum</option>
<option value='Gech'>Gech</option>
<option value='Alba'>Hika</option>
<option value='Win'>Win</option>
<option value='Rex'>Rex</option>
<option value='Hika'>Hika</option>
</select>
</div>
$('#accounttype').on('change', function(event) {
var i= $('#accounttype').val();
if(i=="0")
{
$('#businessmodel').hide();
}
else
{
$('#businessmodel').show();
}
});
Related
According this question I able to add selected item to another select.
Consider we have two select2, with same options.
When I select item from box1, same item should removed from box2 and user couldn't select it.
I provide it on jsfiddle.net.
Now I want to unselected it, the box2 should have that item again.
<select multiple id="Box1" name="Box1" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
<select multiple id="Box2" name="Box2" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
$("#Box1").select2();
$("#Box2").select2();
$("#Box1").on("change", function() {
$.each($('#Box1').select2('data'), function(i, item) {
$('#Box2 option[value="'+item.id+'"]').remove();
});
});
Try this, it's may help :
$("#Box1").select2();
$("#Box2").select2();
$("#Box1").on("change", function(e)
{
$("#Box2").html("");
$('#Box1 option').each(function()
{
if($("#Box1").val())
{
if($("#Box1").val().some(e=>{return e == $(this).val()}))
{
$('#Box2 option[value="'+$(this).val()+'"]').remove();
}
else if(!$("#Box2 option").toArray().some(e=>{return e.value == $(this).val()}))
{
$("#Box2").append($('<option>', {value: $(this).val(), text: $(this).text()}));
}
}
else
{
$("#Box2").html($("#Box1").html());
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/>
<select multiple id="Box1" name="Box1" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
<select multiple id="Box2" name="Box2" style='width:325px;float:left;border:1px solid #80C7E2;'>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="D">D</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
I'm trying to change css based on a select list options, what am I doing wrong?
Help is much appreciated! (I can't change the HTML)
Many thanks.
Erwin
$("select").change(function() {
var color = $("#5f01264e722ae").val();
$("#sw_poster_text2").css("background", color);
});
.sw_poster_text2 {
margin: 30px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">
<select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
<option value="">choose an option</option>
<option value="0z489" data-wapf-label="black">black </option>
<option value="wu4xz" data-wapf-label="brown">brown </option>
<option value="5k848" data-wapf-label="blue">blue </option>
</select>
</div>
<div class="sw_poster_text2">My name</div>
Use $(this).find('option:selected').data('wapf-label') to get the value of the select and use . instead of # to select elements with a particular class.
var color = $(this).find('option:selected').data('wapf-label')
$(".sw_poster_text2").css("background", color);
$("select").change(function() {
var color = $(this).find('option:selected').data('wapf-label')
$(".sw_poster_text2").css("background", color);
});
.sw_poster_text2 {
margin: 30px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">
<select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
<option value="">choose an option</option>
<option value="0z489" data-wapf-label="black">black </option>
<option value="wu4xz" data-wapf-label="brown">brown </option>
<option value="5k848" data-wapf-label="blue">blue </option>
</select>
</div>
<div class="sw_poster_text2">My name</div>
Your option value not is a valid color, you need set a valid color to after set in your style try this:
$("select").change(function() {
var color = $("#5f01264e722ae").val();
$("#sw_poster_text2").css("background", color);
});
.sw_poster_text2 {
margin: 30px;
background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wapf-field-input">
<select data-is-required="" data-field-id="5f01264e722ae" name="wapf[field_5f01264e722ae]" class="wapf-input">
<option value="">choose an option</option>
<option value="black" data-wapf-label="black">black</option>
<option value="brown" data-wapf-label="brown">brown</option>
<option value="blue" data-wapf-label="blue">blue</option>
</select>
</div>
<div class="sw_poster_text2">My name</div>
I need to change the font-size in a div when someone selects a different font size.
Here is my code which I know is working because I added an alert to it. The only thing not working is it changing the font size.
CSS:
.heading {
font-size:18px;
}
JAVASCRIPT:
$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected);
});
HTML:
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="position: relative; zindex: 99; width: 220px; padding: 5px; color: #ffffff; text-align: center;"></div>
I just can't figure out what is wrong.
You need to add px to the every option value or valueSelected+'px'
You are missing the "px" from your value. So you can add it to the values of your dropdown or append it in your script like so:
$('#htsize').on('change', function(e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value + "px";
$(".heading").css("font-size", valueSelected);
});
.heading {
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="">My Headline</div>
Add px as the following code:
$('#htsize').on('change', function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$(".heading").css("font-size", valueSelected + 'px');
});
$(".heading").css("font-size", valueSelected + 'px');
https://jsfiddle.net/ffpxgqy2/
You need to add the "px" on the css font-size value! Here it's working -
<h1>Hello, World!</h1>
<select>
<option value="12">Default</option>
<option value="14">14 PX</option>
<option value="16">16 PX</option>
<option value="18">18 PX</option>
<option value="20">20 PX</option>
</select>
$("select").on("change", function (e) {
var optionSelectedValue;
$( "select option:selected" ).each(function() {
optionSelectedValue = $( this ).val();
});
$("h1").css("font-size", optionSelectedValue + "px");
});
Try this
<SELECT id="htsize" name="htsize" style="width:100px; font-size:10px;">
<option value=""> SELECT ONE </option>
<option value="12">12px</option>
<option value="13">13px</option>
<option value="14">14px</option>
<option value="15">15px</option>
<option value="16">16px</option>
<option value="17">17px</option>
<option value="18">18px</option>
<option value="19">19px</option>
<option value="20">20px</option>
<option value="21">21px</option>
<option value="22">22px</option>
<option value="23">23px</option>
<option value="24">24px</option>
<option value="25">25px</option>
<option value="26">26px</option>
<option value="27">27px</option>
<option value="28">28px</option>
<option value="29">29px</option>
<option value="30">30px</option>
</select>
<div id="headline2" class="heading" style="">My Headline</div>
Jquery
$('#htsize').change(function(event){
var optval= $(this).val();
var optpx= optval + 'px';
$("#headline2").css("font-size", optpx);
});
I've been creating a website through squarespace and the product I'm selling is a made-to-order product with 9 different options to choose from and within those 9 options are 6 different sub options.
To add each product variant to squarespace seems unreasonable and there has to be a better way around this. I've made the code for setting up my own product customization page but I need help making the checkout button on my page link up with squarespace's checkout page. (listing each product dosage) Any suggestions? Thanks in advance!
a{
font-size:25px;
}
html {
background-color: #333;
}
body {
background-color: white;
width: 100%;
margin: 0 auto;
}
select {
outline: 0;
overflow: hidden;
height: 30px;
width: 100px;
margin-right: 100%;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {
border: 1px solid #000;
background: #010;
}
<html>
<body>
<div1>
<a>Caffeine</a>
<select id="caffeine" onchange="myFunction(this.value)">
<option value="0">0</option>
<option value="0.02">150</option>
<option value="0.04">200</option>
<option value="0.06">250</option>
<option value="0.08">300</option>
<option value="0.1">350</option>
</select>
<br>
<br>
<a> Beta-Alanine</a>
<select id="ba" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">1000</option>
<option value="0.04">1500</option>
<option value="0.06">2000</option>
<option value="0.08">2500</option>
<option value="0.1">3000</option>
</select>
<br>
<br>
<a>Creatine HCL</a>
<select id="Creatine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">1000</option>
<option value="0.04">1250</option>
<option value="0.06">1500</option>
<option value="0.08">1750</option>
<option value="0.1">2000</option>
</select>
<br>
<br>
<a>BCAA's 2:1:1</a>
<select id="BCAA" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">2000</option>
<option value="0.04">4000</option>
<option value="0.06">6000</option>
<option value="0.08">8000</option>
<option value="0.15">10000</option>
</select>
<br>
<br>
<a>Citrulline Malate</a>
<select id="CM" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">1000</option>
<option value="0.04">2000</option>
<option value="0.06">3500</option>
<option value="0.08">6000</option>
<option value="0.18">8000</option>
</select>
<br>
<br>
<a>Taurine</a>
<select id="Taurine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">250</option>
<option value="0.04">500</option>
<option value="0.06">750</option>
<option value="0.08">1000</option>
<option value="0.05">1250</option>
</select>
<br>
<br>
<a>Betaine</a>
<select id="Betaine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">500</option>
<option value="0.04">1000</option>
<option value="0.06">1500</option>
<option value="0.08">2000</option>
<option value="0.05">2500</option>
</select>
<br>
<br>
<a>Arginine</a>
<select id="Arginine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">500</option>
<option value="0.04">750</option>
<option value="0.06">1000</option>
<option value="0.08">1250</option>
<option value="0.05">1500</option>
</select>
<br>
<br>
<a>Tyrosine</a>
<select id="Tyrosine" onchange="myFunction(this.value)">
<option value="0.00">0</option>
<option value="0.02">500</option>
<option value="0.04">750</option>
<option value="0.06">1000</option>
<option value="0.08">1250</option>
<option value="0.05">1500</option>
</select>
<br>
<br>
</div1>
<a>Price per Serving: </a>
<div id="pps">0</div>
<br>
<a>Price per Container (30 Servings): </a>
<div id="priceresults">20</div>
<br>
<a>Mg Total: </a>
<div id="mgresults">0</div>
<button>Add to cart</button>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function myFunction(val) {
var price1 = $(caffeine).val();
var price2 = $(ba).val();
var price3 = $(Creatine).val();
var price4 = $(BCAA).val();
var price5 = $(CM).val();
var price6 = $(Taurine).val();
var price7 = $(Betaine).val();
var price8 = $(Arginine).val();
var price9 = $(Tyrosine).val();
var mg1 = document.getElementById('caffeine').options[document.getElementById('caffeine').selectedIndex].text;
var mg2 = document.getElementById('ba').options[document.getElementById('ba').selectedIndex].text;
var mg3 = document.getElementById('Creatine').options[document.getElementById('Creatine').selectedIndex].text;
var mg4 = document.getElementById('BCAA').options[document.getElementById('BCAA').selectedIndex].text;
var mg5 = document.getElementById('CM').options[document.getElementById('CM').selectedIndex].text;
var mg6 = document.getElementById('Taurine').options[document.getElementById('Taurine').selectedIndex].text;
var mg7 = document.getElementById('Betaine').options[document.getElementById('Betaine').selectedIndex].text;
var mg8 = document.getElementById('Arginine').options[document.getElementById('Arginine').selectedIndex].text;
var mg9 = document.getElementById('Tyrosine').options[document.getElementById('Tyrosine').selectedIndex].text;
var totalprice = Number(price1) + Number(price2) + Number(price3) + Number(price4) + Number(price5) + Number(price6) + Number(price7) + Number(price8) + Number(price9);
var totalmg = Number(mg1) + Number(mg2) + Number(mg3) + Number(mg4) + Number(mg5) + Number(mg6) + Number(mg7) + Number(mg8) + Number(mg9);
var numb1 = (totalprice*30+20)/30;
var x = numb1.toFixed(2);
var numb2 = totalprice*30+20;
var y = numb2.toFixed(2);
$("#pps").html(x);
$("#priceresults").html(y);
$("#mgresults").html(totalmg);
}
</script>
rough example: http://codepen.io/garvdaddy/pen/JKQbxa
So, I'm trying to do EXACTLY this, and while it works on jsfiddle, it will not in any of the browsers I've tried...Any ideas?
Even when it's the only thing on the page, it refuses to work for whatever reason.
http://jsfiddle.net/RWUdb/101/
<div>
<label>Device:</label>
<select name="Device" id="Device" class="" onclick="craateUserJsObject.ShowPrivileges();">
<option value="Select">--Select a Device--</option>
<option id="iOS" value="iOS">iOS Device</option>
<option id="macdesktops" value="macdesktops">Mac Desktop</option>
<option id="maclaptops" value="maclaptops">Mac Laptop</option>
<option id="pcdesktops" value="pcdesktops">PC Desktop</option>
<option id="pclaptops" value="pclaptops">PC Laptop</option>
</select>
</div>
<div class="resources" style=" display: none;"><select>
<option>-Select a Model-</option>
<option value="Touch">iPod Touch</option>
<option value="Nano">iPod Nano</option>
<option value="Classic">iPod Classic</option>
<option value="Shuffle">iPod Shuffle</option>
</select> <font color="red">*</font></div>
<div class="resources2" style=" display: none;">
<select>
<option>-Select a Model-</option>
<option value="iMac">iMac</option>
<option value="MacPro">Mac Pro</option>
<option value="Mini">Mac Mini</option>
</select> <font color="red">*</font>
</div>
<div class="resources3" style=" display: none;">
<select>
<option>-Select a Model-</option>
<option value="White">White Macbook</option>
<option value="Pro">Macbook Pro</option>
<option value="Air">Macbook Air</option>
</select> <font color="red">*</font>
</div>
<div class="resources4" style=" display: none;">
<input type="text" id="pcdesktops" placeholder="ie. Dell Optiplex 9010"/> <font color="red">*</font>
</div>
<div class="resources5" style=" display: none;">
<input type="text" id="pclaptops" placeholder="ie. Lenovo G580" /> <font color="red">*</font>
</div>
Javascript:
var Privileges = jQuery('#Device');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'iOS') {
$('.resources').show();
}
else $('.resources').hide();
if ($(this).val() == 'macdesktops') {
$('.resources2').show();
}
else $('.resources2').hide();
if ($(this).val() == 'maclaptops') {
$('.resources3').show();
}
else $('.resources3').hide();
if ($(this).val() == 'pcdesktops') {
$('.resources4').show();
}
else $('.resources4').hide();
if ($(this).val() == 'pclaptops') {
$('.resources5').show();
}
else $('.resources5').hide();
});
Did you enclose it in
$(document).ready(function() {
// your code
});
Add this in your head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>