Question

我试图通过单击打开的选择来为输入字段增加价值。我有这个HTML的输出输入字段

<div class="country first-country col-md-3">
                <input type="text" id="country1" placeholder="Select country/region" value="">
                    <ul id="country-list" class="country-list">
                      <li><a href="#">Spain</a></li>
                      <li><a href="#">France</a></li>
                    </ul>
</div>

然后，当您单击输入字段时，将打开包含选项的下拉菜单，然后当我单击“西班牙”时，应该将西班牙值添加到输入中。

$('.country-list').hide();
$( ".first-country").find('input').focus(function() {
        $('.country-list').show(300);
    });
$( ".first-country").find('a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var text = $this.text();
        $( ".first-country").find('input').attr('value', text);;
        $('.first-country #country-list').hide(300);
    });

一切正常，但是当我尝试在输入字段中键入内容时（例如blabla，然后单击下拉列表，例如Spain），值属性已更改，但是blabla仍然写在输入上，并且js输出作为值，而不是value属性的字符串。

我做错了。如果更容易理解我所遇到的麻烦，那么这里正在摆弄。

wroking fiddle

谢谢

Answer 1

您的问题在这一行：

$( ".first-country").find('input').attr('value', text);;

要设置/获取输入值，您需要使用.val()

我建议更改此选择器（ID必须唯一）：

.first-country #country-list

收件人：

#country-list

而不是：

$( ".first-country").find('input')

您可以减少为：

$( ".first-country input")

代码段：

$('.country-list').hide();
$( ".first-country input").focus(function() {
    $('.country-list').show(300);
});
$( ".first-country").find('a').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    var text = $this.text();
    $( ".first-country input").val(text);
    $('#country-list').hide(300);
});

.country input {
    color: #2980B9;
    font-size: 18px;
    line-height: 27px;
    padding: .5rem .5rem;
    text-transform: uppercase;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="country first-country col-md-3">
    <input type="text" id="country1" placeholder="Select country/region" value="">
    <ul id="country-list" class="country-list">
        <li><a href="#">Spain</a></li>
        <li><a href="#">France</a></li>
    </ul>
</div>

Answer 2

在您的javascript中添加一行：

$('.country-list').hide();
$( ".first-country").find('input').focus(function() {
        $('.country-list').show(300);
    });
$( ".first-country").find('a').click(function(e) {

        e.preventDefault();
        var $this = $(this);
        var text = $this.text();

        $( ".first-country").find('input').attr('value', text);
        $( ".first-country").find('input').val(text); // <-- this one
        $('.first-country #country-list').hide(300);
    });

向输入字段添加值

2 个答案: