CODEWITHSUNDEEP
jquery
user3621162
user3621162

Reputation: 3

Function JQuery doesn't works in Firefox

i'm using this function to change the color of my input text when the select change, the function take the color of the option selected, and put on the input text. This function works well on Chrome and Opera, but on Firefox change the color only for white. Help?

Select:

*<select class="target" id='cor' name='cor'  >
<option style="color:black" <?php if ($inicializaCor == 1 ) echo    'selected'; ?> value='preto'  >Preto</option>
<option style="color:blue" <?php if ($inicializaCor == 2 ) echo 'selected'; ?> value='azul'  >Azul</option>  
<option style="color:red" <?php if ($inicializaCor == 3 ) echo 'selected'; ?> value='vermelho'  >Vermelho</option>  
</select>*

JQuery:

$(document).ready(function(){
  $( "#cor" ).change();
});
$( "#cor" ).change(function() {
  var teste = $('#cor').find('option:selected').css("color");
  $( '#usuario' ).css("color",teste);
});

Upvotes: 0

Views: 43

Answers (1)

Felix
Felix

Reputation: 38112

Try to put all your code inside DOM ready:

$(document).ready(function(){
    $("#cor").change(function() {
        var teste = $('#cor').find('option:selected').css("color");
        $( '#usuario' ).css("color",teste);
    }).change(); // here you can trigger .change() instead of separate handler
});

In order to get the color value as name from your HTML, you can use:

$(document).ready(function(){
    $("#cor").change(function() {
        var teste = $('#cor').find('option:selected')[0].style.color;
        console.log(teste);
        $( '#usuario' ).css("color",teste);
    }).change(); // here you can trigger .change() instead of separate handler
});

Updated Fiddle

Upvotes: 2

Related Questions