Hopefully a simple question here. I have the following html code:
<select id="dropdown">
<option value="#00FFFF">Cyan</option>
<option value="#FF00FF">Magenta</option>
</select>
<textarea style="background-color:[dropdown's selected value]">Sample Text</textarea>
What I'd like is the textarea's background color to dynamically change based on the dropdown's selection. Is there a simple way to reference the dropdown's value using CSS, or would JavaScript be the better route? HTML5 and CSS3 are definitely fair game here. Thanks!
here: DEMO
<select id="dropdown">
<option value="#00FFFF">Cyan</option>
<option value="#FF00FF">Magenta</option>
</select>
<textarea>Sample Text</textarea>
jquery much easier
$('#dropdown').change(function(){
$('textarea ').css('background-color', $(this).val());
});
You cannot do this just with HTML and CSS. Some JavaScript is needed. Example:
<select id="dropdown" onchange="setBg(this)">
<option selected value="#FFFFFF">White</option>
<option value="#00FFFF">Cyan</option>
<option value="#FF00FF">Magenta</option>
</select>
<textarea id="ta">Sample Text</textarea>
<script>
function setBg(sel) {
document.getElementById('ta').style.background =
sel.options[sel.selectedIndex].value;
}
</script>
Related
I want a read-only "select" element to be not selectable, the same behavior as the readonly input box.
In the code below, you cannot change the value for the input box with the value "abc". However, you can still change the selection in the drop. I can't use "disabled" attribute because I still need to send these values to the server.
<input type="text" readonly="readonly" value="abc">
</input>
<select readonly="readonly">
<option>Item ABC</option>
<option>Item XYZ</option>
</select>
https://jsfiddle.net/6Lu1jpLx/
Simplist way to resolve this would be to use the below line:
$("#MySelect").css("pointer-events","none");
However, the following worked for me where in my case I wanted my Select to still have the disabled cursor - setting 'pointer-events' to 'none' will no longer show cursor as 'not-allowed'.
JQUERY
var isReadOnly = $("#MyCheckbox").prop("checked");
var domElements = $("#MyInput, #MySelect");
$(domElements).prop("readonly", isReadOnly);
$(domElements).toggleClass("my-read-only-class", isReadOnly);
$(domElements).find("option").prop("hidden", isReadOnly);
CSS
.my-read-only-class
{
cursor: not-allowed;
}
JSFiddle https://jsfiddle.net/xdddzupm/
style="pointer-events: none;"
Is worked for me
<select style="pointer-events: none;">
<option>Item ABC</option>
<option>Item XYZ</option>
</select>
$("select :selected").each(function(){
$(this).parent().data("default", this);
});
$("select").change(function(e) {
$($(this).data("default")).prop("selected", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select disabled>
<option value="foo1">foo1</option>
<option value="bar1" selected="selected">bar1</option>
<option value="test1">test1</option>
</select>
Try below code
<select>
<option value="foo1">foo1</option>
<option value="bar1" selected="selected">bar1</option>
<option value="test1">test1</option>
</select>
JSFIDDLE Link for Reference
<script>
.greenText{ color:green; }
</script>
<html>
<select onload="this.className='greenText'" onchange="this.className='greenText'">
<option value="apple" >Apple</option>
<option value="banana" >Banana</option>
<option value="grape" >Grape</option>
</select>
</html>
In the above example i add the CSS class for both onload and onchange event.
But here only works on onchange but not working in onload event. I want to be in green color at the time of loading 'Dropdown Box'.
"Select" does not support the "onload" event. Try this
<style type="text/css">
.greenText{ color:green; }
</style>
<script type="text/javascript">
window.addEventListener("load",function(){
document.getElementById("my_select").className="greenText";
},false);
</script>
<select id="my_select" onchange="this.className='greenText'">
<option value="apple" >Apple</option>
<option value="banana" >Banana</option>
<option value="grape" >Grape</option>
</select>
A select element doesn't load any external content, so there is no load event.
If you want to fire JS on it immediately after it has been added to the DOM, just put a <script> element after its end tag.
It would seem to make more sense to simply use a class attribute instead of involve JS though.
since you just want it to be green regardless (onload or onchange) just need to set the class on the select.
<select class='greenText'>
<option value="apple" >Apple</option>
<option value="banana" >Banana</option>
<option value="grape" >Grape</option>
</select>
I've created a simple select menu
<select class="element">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
However, when I click on the select menu, nothing happens.
I've attached an jQuery onclick listener to determine if the click is being registered and it is. However, the options are not being displayed.
Is there any particular reason why the options list would not be displayed?
CSS rules as requested:
select {
height: 25px;
background: #FFFFFF;
}
$('.element').on('click', function(){
console.log('clicked');
});
Check this code:
### Listbox
http://jsfiddle.net/4jkE8/2/
Try this on your css:
select {
height: 25px;
background: #FFFFFF;
}
$.noConflict();
$('.element').on('click', function(){
console.log('clicked');
});
Also I think that you have a Javascript or Jquery file that is making conflict, try creating this on your view:
<select class="element">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
<script type="text/javascript">$.noConflict();</script>
Change your class name to something different. Then instead of using it as a class change it to an id. Then in your jQuery detect the on change event. Usually when having a select option you only need one of them. The id attribute is meant for when there is only one one of that element on a page.
I feel fairly certain that the click event does not work for all browsers on a select list. You may want to check out this question: Click event on select option element in chrome
HTML Code:
<select id="status">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
<select id="status">
<option value="3">Read Only</option>
<option value="1">Editable</option>
<option value="2">Hidden</option>
</select>
JavaScript Code:
$('#status').on('change', function(){
console.log('changed');
});
I have a select which initially shows Select language until the user selects a language. When the user opens the select, I don't want it to show a Select language option, because it's not an actual option.
How can I achieve this?
Kyle's solution worked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML.
Adding a value of selected to the item we want to appear as a header forces it to show in the first place as a placeholder.
Something like:
<option selected disabled>Choose here</option>
The complete markup should be along these lines:
<select>
<option selected disabled>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
You can take a look at this fiddle, and here's the result:
If you do not want the sort of placeholder text to appear listed in the options once a user clicks on the select box just add the hidden attribute like so:
<select>
<option selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Check the fiddle here and the screenshot below.
Here is the solution:
<select>
<option style="display:none;" selected>Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
The proper and semantic way is using a placeholder label option:
Add an option element as the first child of the select
Set value= "" to that option
Set the placeholder text as the content of that option
Add the required attribute to the select
This will force the user to select another option in order to be able to submit the form, and browsers should render the option as desired:
If a select element contains a placeholder label option, the user
agent is expected to render that option in a manner that conveys that
it is a label, rather than a valid option of the control.
However, most browsers will render it as a normal option. So we will have to do fix it manually, by adding the following to the option:
The selected attribute, to make it selected by default
The disabled attribute, to make it non-selectable by the user
display: none, to hide it from the list of values
select > .placeholder {
display: none;
}
<select required>
<option class="placeholder" selected disabled value="">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Because you can't use assign placeholders for select tags, I don't believe that there is any way to do exactly what you're asking for with pure HTML/CSS. You can, however, do something like this:
<select>
<option disabled="disabled">Select language</option>
<option>Option 1</option>
</select>
"Select language" will show up in the dropdown, but once another option is selected it will not be possible to reselect it.
I hope that helps.
Try this:
<div class="selectSelection">
<select>
<option>Do not display</option>
<option>1</option>
<option>1</option>
</select>
</div>
In the CSS:
.selectSelection option:first-child{
display:none;
}
I have a solution with a span displayed above the select until a selection done. The span displays the default message, and so it's not in the list of propositions:
HTML:
<span id="default_message_overlay">Default message</span>
<select id="my_select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
CSS:
#default_message_overlay {
position: absolute;
display: block;
width: 120px;
color: grey;
}
select {
width: 150px;
}
Javascript (with JQuery):
$(document).ready(function() {
// No selection at start
$('#my_select').prop("selectedIndex", -1);
// Set the position of the overlay
var offset = $('#my_select').offset();
offset.top += 3;
offset.left += 3;
$('#default_message_overlay').offset(offset);
// Remove the overlay when selection changes
$('#my_select').change(function() {
if ($(this).prop("selectedIndex") != -1) {
$('#default_message_overlay').hide();
}
});
});
I've made a jsfiddle for demo. Tested with Firefox and IE8.
To answer your question directly use this code on the option you do not want it to appear in option list:
<option value="" hidden selected>Select Language</option>
<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>
you can of course move the css to a css file if you want, and put a script to catch the esc button to select the disabled again. Unlike the other similar answers I put value="", this is so if you send the value(s) of your select list with a form, it won't contain "chose something". In asp.net mvc 5 sent as json compiled with var obj = { prop:$('#ddl').val(),...}; and JSON.stringify(obj); the value of prop will be null.
Op1:
$("#MySelectid option").each(function () {
if ($(this).html() == "text to find") {
$(this).attr("selected", "selected");
return;
}
});
Op2:
$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; }).attr('selected','selected');
Here is my select box:
<select id="category">
<option value="">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
I want the Pick a choice! option to be removed when the user click on the select box. If the user click anywhere else, the Pick a choice! option come back. I don't want the user to be able to pick the Pick a choice! option. What should I do?
Without some PHP or JavaScript to remove the option dynamically you do have another very simple option that I use regularly, this is the disabled="disabled" option. The option will remain but the user won't be able to actually select it.
The failure with this is if someone just submits a form without choosing anything the empty value will submit in the form, but this is where your validation handling comes into play.
Your code for the "Pick a choice!" option will look something like this:
<option disabled="disabled">Pick a choice!</option>
I hope it helps.
CSS Only Sol'n
So, I know this post is quite old now, but a css only solution wasn't offered... Much more efficient way of accomplishing this. Notice the first <option> doesn't have a value attribute; this allows it to effectively placehold.
#category:focus option:first-of-type {
display: none;
}
<select id="category">
<option>Pick a choice!</option>
<option value="choice1">choice1</option>
<option value="choice2">choice2</option>
<option value="choice3">choice3</option>
<option value="choice3">choice4</option>
</select>
Here is some workaround. Don't know wether this is suite your requirement.
<html>
<head>
<title>Untitled Document</title>
<script>
function doremove()
{
var obj=document.getElementById("category");
obj.remove(0);
}
function addOpt()
{
var obj=document.getElementById("category");
var option=document.createElement("option");
option.text="Pick a choice!";
option.value = 0;
obj.add(option,1);
obj.value = 0;
}
</script>
</head>
<body>
<select id="category" onfocus="doremove();" onblur="addOpt();">
<option value="0">Pick a choice!</option>
<option value="">choice1</option>
<option value="">choice2</option>
<option value="">choice3</option>
<option value="">choice4</option>
</select>
<input type="text" />
</body>
</html>
Try this
$("#SelectID option:first").remove();