Добавление значения к входу с помощью функции

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 CODE - ::: -

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

Так что любой может помочь мне с этим.Поскольку я новичок в создании функций на основе 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>

Answer 2

Мне кажется, проблема в том, что вы добавляете функцию change_country в jQuery, но когда вы вызываете ее, вы вызываете ее так, как будто это обычная глобальная функция.

Это должно работать так, как если бы вы изменили первую строку JS на эту:

var change_country = function() {

Это сделало бы ее глобальной функцией, и тогда вызов ее должен работать.

В дополнительном примечании все ваши элементы a имеют одинаковый идентификатор - это неверно, поскольку идентификатор элемента должен быть уникальным.

Answer 3

Вы можете попробовать это:

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

Answer 4

Я думаю, вы не понимаете, как вы хотите это реализовать. Вы определили свою функцию в пространстве имен jQuery.fn, где вы обычно помещаете плагин jQuery, который работает с набором элементов DOM. Но затем вы пытаетесь вызвать эту функцию напрямую с атрибутом onclick элемента, указывающего на change_country, который не существует. Если бы вы вызывали функцию таким образом, это было бы на самом деле:

onclick="jQuery.fn.change_country()"

Но я не думаю, что это то, что вы действительно хотите сделать. Вот как бы я это сделал: http://jsfiddle.net/nWrAt/8/... более или менее.