Adding value to a input using function

I don't know what is getting wrong in my created function. I was trying to create a beautiful country selector. But it looks like this selector is gonna select nothing. Just joking, so my problem is according to my thinking my function should change the value of a input field classed as country_input on clicking multiple series of links. But it looks like it is not gonna work. But you guys can tell me how to achieve my goal.

-:::- HTML CODE -:::-

<input type="text" class="country_input" />
<br><br>
<a href="#country-select" id="Change-1" onclick="change_country();" >Country-1</a>
<a href="#country-select" id="Change-2" onclick="change_country();" >Country-2</a>
<a href="#country-select" id="Change-3" onclick="change_country();" >Country-3</a>
<a href="#country-select" id="Change-4" onclick="change_country();" >Country-4</a>
<a href="#country-select" id="Change-5" onclick="change_country();" >Country-5</a>
And so on....

-:::- jQuery CODE -:开发者_如何学JAVA::-

jQuery.fn.change_country = function () {

                            var country_name = $(this).innerHTML;

                            $('input.country_input').val(country_name);

                          };

-:::- CSS CODE -:::-

body a { text-decoration: none; display: block; width: 50%; color: #555; background: rgb(240, 240, 240); border: 2px solid #000; border-style: none none solid none; font-family: calibri,segoe ui,arial, sans-serif; font-size: 12px; padding: 3px 5px; }

body a:hover { color: #000; background: #fff; }

body input { font-family: calibri,segoe ui,arial, sans-serif; font-size: 12px; padding: 3px 3px; width: 50%; outline: none; }

So can anyone help me out with this. As I'm a new comer in creating jQuery based functions so please help me out.

Am I doing wrong function defining? Am I missing something? Is my code is totally failure?

LIVE DEMO

THANKS IN ADVANCE!

This works:

<script type="text/javascript">
$(document).ready(function(){
    $('.countryLink').click(function(){
        var innerText = $(this).text();
        $('.country_input').val(innerText);
    });
});
</script>

And HTML:

<input name="Text1" type="text" class="country_input"/>
<br/>
<a href="#country-select" id="Change-1" class="countryLink">Country-1</a>
<a href="#country-select" id="Change-2" class="countryLink">Country-2</a>
<a href="#country-select" id="Change-3" class="countryLink">Country-3</a>

See working example at jsfiddle.

Edit: I guess that you might want to use dropdown in scenario like this (too many options). Then you can do it like this:

$(document).ready(function(){
    $('.countryDropDown').change(function(){
        var innerText = $(this).children(':selected').text();
        $('.country_input').val(innerText);
    });
});

With HTML:

<input name="Text1" type="text" class="country_input"/>
<br/>
<select name="Select1" class="countryDropDown">
    <option value="c1">Country-1</option>
    <option value="c2">Country-2</option>
    <option value="c3">Country-3</option>
</select>

Looks to me that the problem is you're adding the change_country function into jQuery, but when you're calling it, you're calling it like it was a normal global function.

It should work like you have it now if you change the first JS line to this:

var change_country = function() {

This would make it a global function, and then the call to it should work.

On a secondary note, all your a elements have the same ID - This is incorrect, as an element's ID should be unique.

You could try this:

<input type="text" class="country_input" />
<br>
<div class="country-select">Country-1</div>
<div class="country-select">Country-2</div>
<div class="country-select">Country-3</div>
<div class="country-select">Country-4</div>

<script type="text/javascript">
$(function(){
    $(".country-select").click(function(){
        $('input.country_input').val($(this).innerHTML);
    });
});
</script>

I think youre confused about how you want to implement this. Youve defined your function in the jQuery.fn namespace which is where you typcially would put a jQuery plugin that works on a set of DOM elements. But then you try and call that function directly with an onclick atribute on the element pointing to change_country which doesnt exist. If you were to call the function in this way it would actually be:

onclick="jQuery.fn.change_country()"

But i dont think thats what you really want to do. Heres how i would do it: http://jsfiddle.net/nWrAt/8/... more or less.