javascript - 使用函数为输入添加值

Question

我不知道我创建的函数出了什么问题。我试图创建一个漂亮的国家/地区选择器。但看起来这个选择器不会选择任何东西。开个玩笑，所以我的问题是根据我的想法，我的函数应该在单击多个链接系列时更改分类为 country_input 的输入字段的值。但看起来它不会起作用。但是你们可以告诉我如何实现我的目标。

-:::- HTML 代码 -:::-

<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 代码 -:::-

jQuery.fn.change_country = function () {

                            var country_name = $(this).innerHTML;

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

                          };

-:::- CSS 代码 -:::-

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; }

谁能帮我解决这个问题。由于我是创建基于 jQuery 的函数的新手，所以请帮助我。

我是不是在做错误的函数定义？ 我错过了什么吗？ 我的代码完全失败了吗？

LIVE DEMO

提前致谢!

Answer 1

这个有效:

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

和 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>

请参阅 jsfiddle 中的工作示例.

编辑:我想您可能想在这种情况下使用下拉菜单(选项太多)。然后你可以这样做:

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

使用 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>