I currently have a select box that has options of different colors, as well as a contenteditable inside a div to be used as a text editor. What I want is when I select a color from the box e.g. red, the selected text inside the contenteditable changes to red.
<select id="colorChange">
<option onchange="value="Black">Black</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Pink">Pink</option>
</select>
Onchange of options call a function and use jquery .css method to the change the text color.
function changeColor(){
var _color = $("#colorChange option:selected" ).val().toLowerCase();
$("#abc").css('color',_color)
}
Note: There is a typo in <option onchange="value="Black">Black</option>
JSFIDDLE
Here is the jQuery solution.
onchange needs to be on select.
Apply the selected color to the div.
$(function() {
var color = 'black';
$('select').change(function() {
color = $(this).val();
$('div').css('color', color);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorChange">
<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>
<option value="Pink">Pink</option>
</select>
<br/>
<br/>
<div contenteditable="true">This text color will change based on selection</div>
Listen for the change event on the select input, grab its value then change the color of your container using CSS.
$('#colorChange').change(function(){
var selectedColor = this.value;
$('#container').css('color', selectedColor);
});
This method will work when using color names Supported by all browsers (http://www.w3schools.com/cssref/css_colors.asp) if you want custom colors you will need to either set the value of the options in the select input to the HEX(#) value for the color required or pass selectedColour through a switch statement to determine the color code.
Javascript version. I really hope I am not doing your homework.
document.getElementById('colorChange').addEventListener('change',function(event){
var val = event.target.value;
var div = document.getElementById('editableDiv');
div.style.color = val;
});
Try this:)
$('#colorChange').on('change', function() {
$color = this.value
$("select option:selected").css("color", $color);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colorChange">
<option onchange="value="Black">Black</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
<option value="Pink">Pink</option>
</select>
Related
I have some html and JavaScript for a select drop-down box. When the user selects the color I want the background of the selected option to successfully update with the color of the background.
In the code I am experiencing what is occurring with Firefox, when you hover over a select option it changes the hover color to blue, and when you select it it takes that background color.
When I run the exact same code in Chrome, it successfully uses the background color of the selected option.
What can I do to make this cross platform compatible and work?
$("#color_me1").change(function(){
var color = $("option:selected", this).css("background-color");
$("#color_me1").css("background-color", color);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Color One:</label>
<select id="color_me1" name="color1">
<option disabled selected value> -- select color -- </option>
<option value="800000" style="background-color:#800000">Maroon</option>
<option value="FF0000" style="background-color:#FF0000">Red</option>
<option value="FFA500" style="background-color:#FFA500">Orange</option>
<option value="FFFF00" style="background-color:#FFFF00">Yellow</option>
<option value="808000" style="background-color:#808000">Olive</option>
<option value="008000" style="background-color:#008000">Green</option>
<option value="800080" style="background-color:#800080">Purple</option>
<option value="FF00FF" style="background-color:#FF00FF">Fuchsia</option>
<option value="00FF00" style="background-color:#00FF00">Lime</option>
<option value="008080" style="background-color:#008080">Teal</option>
<option value="00FFFF" style="background-color:#00FFFF">Aqua</option>
<option value="0000FF" style="background-color:#0000FF">Blue</option>
<option value="000080" style="background-color:#000080">Navy</option>
<option value="808080" style="background-color:#808080">Gray</option>
<option value="FFFFFF" style="background-color:#FFFFFF">White</option>
</select>
<br>
Not sure why that happens, but this works:
$("#color_me1").change(function(){
var color = $("option:selected", this).get(0).style.backgroundColor
$("#color_me1").css("background-color", color);
});
Or using JavaScript:
$("#color_me1").change(function(){
var selectedOption = this.selectedOptions[0]
var color = selectedOption.style.backgroundColor
$("#color_me1").css("background-color", color);
});
https://codepen.io/anon/pen/NELLNx
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 want when selected option color from dropdown list then displaye selected text in id="name_text"
i could not change Html form code I want only when selected option then display text selected
my code is not work :(
<select id="property-transection" name="property-transection">
<option value=""></option>
<option value="53"> Blue </option>
<option value="24"> Green </option>
<option value="31"> Black </option>
</select>
<div id="name_txt">You selected (BLUE Or Green Or Black)</div>
<script>
$(document).on('change', '#property-transection', function() {
$('#name_txt').text($(this).val());
var po = this.val();
if( po = '53'){
var vb="BLUE COLOR SELECTED";
$('#noate_o').text(vb);
}
});
</script>
This should work for you:
<select id="property-transaction" name="property-transaction">
<option value=""></option>
<option value="53">Blue</option>
<option value="24">Green</option>
<option value="31">Black</option>
</select>
<div id="name_txt">Color Name Populates Here</div>
<script>
$(document).on('change', '#property-transaction', function() {
$('#name_txt').text($('#property-transaction option:selected').text());
});
</script>
Here's a working example:
https://jsfiddle.net/w73bzgos/2/
I have a select element of the form:
<select id="test" name="test">
<option value="blah">Test1</option>
<option value="blah">Test2</option>
.
<option value="blah">Testn</option>
</select>
I want to display the text "Select a test" as default.
I know the way of doing this is to set a new option
<option selected="selected">Select a test</option>
at the top. But I'm looking for some other way where I don't have to use the tag.
Is it possible through javascript (jQuery will also do)?
I've done this with a dummy entry in the past...
HTML
<select id="test" name="test">
<option value="0">Select an option...</option>
<option value="blah">Test1</option>
<option value="blah">Test2</option>
<option value="blah">Test3</option>
<option value="blah">Test4</option>
<option value="blah">Test5</option>
</select>
Javascript
$("#test").on("change", function() {
if ($(this).val() != "0") {
$("option[value=0]", this).remove();
}
});
Here's a working example on jsFiddle...
http://jsfiddle.net/97Bqr/
The "Select an option" option is removed as soon as you select something else.
Here's a plain js solution:
var selecttest = document.querySelector('#test');
selecttest.insertBefore(new Option('select a test'),selecttest.firstChild);
selecttest.selectedIndex = 0;
I have a select option :
<select>
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
Now what I want is that whatever option I select from the dropdown, the value in the select should always be "select".
Thanks.
you could try something like this:
<select id="yourselect">
<option value="select">select</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
<option value="vw">VW</option>
</select>
<script>
var s = document.getElementById('yourselect');
s.onchange = function() {
s.selectedIndex = 0; // on change event always select the first option
}
</script>
Example Fiddle : http://jsfiddle.net/8geek/
Add an event listener for an onchange event, in that listener you set the currently selected option to Select dynamically
Like Jukka mentioned, it seems like you want a select element where all the choices have the same effect? However, you should at least store the the chosen option.
Maybe this is something you are looking for: http://jsfiddle.net/NfRRM/