We Keep Coding

Display Text instead value selected dropdown list by javascript

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/

onchange to change text color inside contenteditable

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>

Change select background colour when a non disabled option is selected

looking for a way to change the colour of a select box if one of the disabled options is not selected.
So this is the example drop down:
<select class="selectoption" name="desc[]">
<option disabled="disabled" selected="selected">Select option...</option>
<option value="1">Option 1</option>
</select>
How can i change the background colour of this select box, if the disbaled option is not selected.
So the back ground colour is #333 currently, once a user selects an option it is changed to another colour.
i already am doing something similiar using checkboxes. But i am able to use the
checkbox:checked
Thanks in advance!

If there's no problem in using javascript, you can check for the selected option that has a value.
HTML:
<select id="sel1" class="selectoption" name="desc[]">
<option disabled="disabled" selected="selected">Select option...</option>
<option value="1">Option 1</option>
</select>
JavaScript:
document.getElementById("sel1").onchange = function() {
if(this.value != null && this.value != undefined)
{
this.className = "myclass";
}
};
CSS:
select.myclass
{
background-color: red;
}
http://jsfiddle.net/AWMaa/

HTML setting default text on select

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;

A Placeholder for the `select` tag?

I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".
I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).
I have tried this:
1)
<fieldset>
<select data-placeholder="Please select a product" id="s1" class="global">
<option value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
2)
<fieldset>
<select id="s1" class="global">
<option data-placeholder="true" value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
Both are not working, maybe there is a jQuery method to make that?
Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.

Here's two types of placeholder, re-selectable and hidden:
Demo: http://jsfiddle.net/lachlan/FuNmc/
Re-selectable placeholder:
<select>
<option value="" selected>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Hidden placeholder:
<select class="empty">
<option value="" selected disabled>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
CSS to change the colour of the first item:
select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }
And a little jQuery to toggle the font-color after selection:
// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
$(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');
Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder

I've built a simple demo by following #Truth suggestion: http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
I hope it works for you.

As far as I know, there's no way doing it with HTML alone (though that would be nice.)
You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.
Here's a working example of what I describe.

My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.