时间戳

首页 > 解决方案 > 向输入字段添加值

javascript - 向输入字段添加值

问题描述

我正在尝试通过单击单击时打开的选项来为输入字段添加值。我有这个输出输入字段的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，然后我单击例如西班牙的下拉列表，值属性已更改，但 blabla 仍然写在输入上，并且 js 将其作为值输出，而不是来自 value 属性的字符串。

我做错了什么。如果更容易理解我遇到的问题，这里就是工作小提琴。

工作小提琴

谢谢

标签： javascriptjqueryhtml

解决方案

您的问题在这一行：

$( ".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>

推荐阅读