如何使用jQuery检测所选单词并更改输入字段的背景

Question

I have a select list, it has class .topics as follows

• Countries
  • United States of America
  • United Kingdom
• Science
  • Physics
  • Chemistry
• Health
• History

and have an input text field, it has class .body . if user write any word which is selected as topic than i want to change the background color of the body to red. How do i achieve this thing with jQuery? I tried my best to solve it but i don't know why my mind wasn't getting to starting point. Thanks for giving me a hint as i am new to jQuery.

Answer 1

For someone who is new to Jquery it can seem daunting, but if you familiarize yourself with the Jquery Docs here: http://api.jquery.com/ you will find that Jquery is one of the easiest languages to ever learn, and you can get a good handle on it in as little as a few months.

here is a commented solution to your question, and i hope that it helps you understand a bit how Jquery works. it will seem confusing at first, but if you read enough about anonymous functions and callbacks, you will pick it up in no time.

$(function(){ //this is a shortcut to document ready function

    var selected = null;//first, we need to define a variable called selected. 
    //when  the val() of .topics changes, 
    //this will house the text value of the currently selected option.

    $(document).on('change','.topics',function(){ 
    //detect a change in the document only relative to the 
    //.topics class, according to another post, 
    //this works with dynamically generated dom elements.

        selected = $('.topics').val();//set the value of selected in global 
        //scope so we can use it in our body keyup

    });

    $('.body').keyup(function(){ //detect when a user is typing in the .body element(s)

        if($(this).val() == selected) //if the value of the element equals the same as the select option
        {
            $(this).css('background-color','red');//make the background red.
        }else{
            if($(this).css('background-color') == 'red'){
                $(this).css('background-color','');//fall back to default
            }
        }
    });

});