I need to change the color of the text based on the drop down list selection.

<select id="room2">
    <option>#0808cf</option>
    <option>#0E9E26</option>
</select>
<input type="text" id="txtColor">
   John: <p style="color:#0808cf" > test </p>

jquery

$('#colors').change(function(){
   $('#txtColor').val($("#colors").val());
   var fontColor =  $('#txtColor').val();

});

I dont want the change to be in the css cause the select id will not be constant. I want it to be inserted in the p style tag. And also i need the text to be John: test to be in one line. I tried this but not working. Thank you.

<p style="color:"+fontColor+" > test </p>

demo: /

I need to change the color of the text based on the drop down list selection.

<select id="room2">
    <option>#0808cf</option>
    <option>#0E9E26</option>
</select>
<input type="text" id="txtColor">
   John: <p style="color:#0808cf" > test </p>

jquery

$('#colors').change(function(){
   $('#txtColor').val($("#colors").val());
   var fontColor =  $('#txtColor').val();

});

I dont want the change to be in the css cause the select id will not be constant. I want it to be inserted in the p style tag. And also i need the text to be John: test to be in one line. I tried this but not working. Thank you.

<p style="color:"+fontColor+" > test </p>

demo: http://jsfiddle/kX3EN/

• javascript
• html

3 Answers 3

Try - http://jsfiddle/kX3EN/7/

$('#colors').change(function(){
    $('p').css( 'color', $(this).val() );
});

If you want your "John: test" to be on the same line, you need to:

• Change the p (block-level) to something like a span (inline) or
• Force the p to act as inline with css (display: inline).

Using jQuery, you need to use the css() function to change the style attribute of an element. Like so:

$('selector for element you want to change').css('color', $("#your-select-element").val());

You'll probably put this in an event handler for your select:

$("select#colors").change(function() {
    $("span.changemycolor").css('color', $(this).val());
    // 'this', in this case, is your select element
});

got it working by placing the tag after my html code filter. So everytime I append a message will be stored as variable and read as JS when the var is sent to the websocket send method. Thank you