I'm still very new to writing JS.
I want to be able to change 2 divs based on on option from a tag.
i.e if some one selects the color red it will show 2 different divs with content about red.
Please see the code below.
Thankyou in advance!
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</Select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#colorselector').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
</script>
Consider adding a div as a container for your divs and create them
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</Select>
<div id="content"></div>
$('#colorselector').change(function(){
$('.colors').hide();
$('#content').html('');
$('#content').append('<div>Div 1'+ $(this).val()+'</div>');
$('#content').append('<div>Div 2'+ $(this).val() +'</div>');
});
The modern day frontend is heavily dependant on templating and rendering. To get into React/Vue/Angular, start with any simple templating library. Eg handlebars:
Your solution in handlebars:
<Select id="colorselector">
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</Select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<script>
// compile the template
var template = Handlebars.compile("<div> 'This can be anything eg <b>bold</b> text or selected value: {{content}}</div>");
$(function() {
$('#colorselector').change(function(){
$('body').append(template({ content: $(this).val() }))
});
});
</script>
Related
I need to show/hide options on one select drop down dependant on another select drop down option.
My code:
$(document).ready(function() {
$("#layout_select").select2();
$("#column_select").select2();
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').hide();
$("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<option value="col1">none</option>
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
When I change the selection of my first 'column_select', I want to change my 'layout_select' options using hide / show
Something like this StackOverflow issue
Note: I am using Select2.
In my implementation I did exactly as the example, but as I am using select2 scrpit does not work.
Does anyone know how to do the same thing, knowing that I'm using select2? Without using .remove () and .append (), but exactly as in the example giving hide / show.
As suggested in this answer, you could disable the options instead of hiding them and use CSS to hide the options if you want (they will be grayed out otherwise).
You will have to call $("#layout_select").select2(); at the end of the change event and call $("#column_select").change(); to trigger the change event on page load.
$(document).ready(function() {
$("#layout_select").select2();
$("#column_select").select2();
$("#layout_select").children('option:gt(0)').hide();
$("#column_select").change(function() {
$("#layout_select").children('option').prop('disabled', true);
$("#layout_select").children("option[value^=" + $(this).val() + "]").prop('disabled', false);
$("#layout_select").select2();
})
$("#column_select").change();
});
.select2-container--default .select2-results__option[aria-disabled=true] {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<select name="column_select" id="column_select">
<option value="col1">1 column</option>
<option value="col2">2 column</option>
<option value="col3">3 column</option>
</select>
<select name="layout_select" id="layout_select">
<option value="col1">none</option>
<option value="col2_ms">layout 1</option>
<option value="col2_sm">layout 2</option>
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
I have some issues with options, can someone help me ?
I have a button with id="colorButton" but I don't know how to change his color with options.
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
It can be a javascript answer, jquery... please :(
I have this in script :
$(document).ready(function(){
if ($("#colorSelect").click().val("1"){
$("#testButton").css("color", "red");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But ofc it don't work :(
Your code contains lots bugs, you just need to bind a change event handler and set color based on selected option.
$(document).ready(function() {
$("#colorSelect").change(function() {
$("#testButton").css("color", $(':selected', this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<div id="testButton">button</div>
You need to bind to the change event of the select like:
$(document).ready(function() {
$("#colorSelect").change(function() {
if ($(this).val() == 1) $("#testButton").css("color", "red");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
</form>
<button id="testButton">button</button>
Everyone is focusing on making your code functional. I put the effort to solve your problem in different way.
Each option has data-color attribute. When you change dropdown then selected option's data-color value get picked and changes color. In this way, you don't need multiple if-else.
$(document).ready(function() {
$('#colorSelect').on('change', function(){
var color = $(this).find(':selected').data('color');
$("#testButton").css("color", color);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="colorSelect">
<option selected disabled>Text-Align : </option>
<option data-color='red'>Red</option>
<option data-color='blue'>Blue</option>
<option data-color='green'>Green</option>
</select>
<button id="testButton">button</button>
</form>
I need to remove some options from the 2nd dropdown menu based on the first.
I have tried quite a few iterations to get it done but still it is not working.
Kindly provide with solutions
In the below code I need to remove the option from the 2nd dropdown already selected in the 1st one.
I have tried the mentioned HTML & Javascript Code
HTML
<form>
Source:
<select id = "box1" name="a">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Carrot">Carrot</option>
</select>
Destination:
<select id="box2" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
</form>
JAVASCRIPT
var main = function(){
$("#box1").change(function(){
var a = $('#box1 option:selected').val();
$("#box2 option[value='a']").remove();
});
}
$(document).ready(main);
I have tried entering the value as variable a with and without quotes but no effect. Although when i replaced 'a' with a specific value like 'Apple', then the code is working.
I think this is your answer ;)
var main = function(){
$("#box1").change(function(){
var a = $('#box1 option:selected').val();
$("#box2 option[value="+a+"]").hide().siblings().show();
});
}
$(document).ready(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="box1" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
<select id="box2" name="b">
<option>select</option>
<option value="Apple">Apple</option>
<option value="Mango">Mango</option>
<option value="Dice">Dice</option>
<option value="Carrot">Carrot</option>
</select>
Hi kindly check https://jsfiddle.net/RRR0308/uubuumrz/1/
HTML
<select id="box1">
<option>111</option>
<option>222</option>
<option>333</option>
<option>444</option>
</select>
<select id="box2">
<option>999</option>
<option>222</option>
<option>888</option>
<option>444</option>
</select>
jQuery
$(document).ready(function(){
$('#box1').on('change', function(){
var x=$(this).val();
$('#box2 option').each(function(){
if($(this).val()==x){
$(this).remove();
}
});
});
});
hide().siblings().show()
instead of.remove()`
The .remove() permanently removes the selected option in box1 from box2. so if you use .hide() and .show(), it would hide and show. try making these changes.
$('#box1').change(function(){
var v = $(this).val();
$('#box2').find("option[value="+v+"]").remove(); });
Try this simple one
External system generates translations and replace literals with span text on the page. It works perfectly fine for the most of places but it doesn't work with options in select. They support only text. As the result my page has the issue like here SQL Fiddle sample.
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
I want some jquery/javascript function that would replace option content with just text and remove wrapper in above.
Expected result:
<select class="ProductInfo" >
<option value=""></option>
<option value="0">Opt1</option>
<option value="1">Opt2</option>
</select>
It is best to fix in the template itself, if that is not possible you can try something like
$('.ProductNoInfo option').text(function(i, t) {
return $(t).text()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ProductNoInfo">
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
Try using decodeURICompoenent
$("select option").each(function() {
this.textContent = $(decodeURIComponent(this.textContent)).text()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
Try this,
$('.ProductNoInfo option').each(function(){
$(this).text($(this).find('span').text());
});
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('.ProductInfo option').each(function () {
this.textContent = $(decodeURIComponent(this.textContent)).text()
});
});
</script>
</head>
<body>
<select class="ProductInfo" >
<option value=""></option>
<option value="0"><span class='translation'>Opt1</span></option>
<option value="1"><span class='translation'>Opt2</span></option>
</select>
</body>
</html>
I tried to change the colors of the select lists header, title and text. I added the functions changehead(), changetitle() and changebody() to do this. And bind elements through unique id.
But I'm getting the following error
Uncaught TypeError: Cannot read property 'undefined' of undefined
in the function changehead(), after
header = document.form1.heading.options[i].value;
and in the function changetitle() after
header = document.form1.heading.options[i].value;
I'm not sure whether I should be using two different functions or if it can be done with one.
Code:
<script>
function changehead() {
i = document.form1.heading.selectedIndex;
header = document.form1.heading.options[i].value;
document.getElementById("head1").style.color = header;
}
function changetitle() {
i = document.form1.heading.selectedIndex;
header = document.form1.heading.options[i].value;
document.getElementById("head2").style.color = header;
}
function changebody() {
i = document.form1.body.selectedIndex;
doccolor = document.form1.body.options[i].value;
document.getElementById("p1").style.color = doccolor;
}
</script>
</head>
<body>
<h1 id="head1">Controlling Styles with JavaScript</h1>
<hr>
<h2 id="head2">Subtitles at this screen. And cery important subtitles!</h2>
<hr>
<p id="p1">Select the color for paragraphs and headings using the form below. The colors you specified will be dynamically changed in this document. The change occurs as soon as you change the value of either of the drop-down lists in the form.</p>
<form name="form1"> <b>Heading color:</b>
<select name="heading" onChange="changehead();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<br>
<B>Body text color:</B>
<select name="body" onChange="changebody();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<br> <b>Heading second color:</b>
<select name="heading" onChange="changetitle();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
</form>
</body>
Questions:
How to circumvent situation with errors?
Do need two different functions for changing head & title, or is one enough (if yes - how)?
You have two selects named "heading". Give them different names and your javascript will stop throwing errors.
Here is a working example: http://jsbin.com/uritid/1/edit