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>

这一切都很好，但当我尝试在输入字段中键入某些内容时（例如blabla，然后单击下拉列表，例如西班牙），value属性被更改，但blabla仍然写入输入，js将其作为值输出，而不是value属性中的字符串

我做错了什么。 这里是工作小提琴，如果它更容易理解我有什么麻烦

---

谢谢

您的问题在这一行：

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

为了设置/获取输入值，您需要使用

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

致：

而不是：

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

您可以减少到：

$( ".first-country input")

片段：

$（'.country list'）.hide（）；
$（“.first country input”）.focus（函数（）{
美元（“.country list”）。显示（300）；
});
$（“.first country”）。查找（'a'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var text=$this.text（）；
$（“.first country input”）.val（文本）；
$（“#国家列表”）.hide（300）；
})；

。国家/地区输入{
颜色：#2980B9；
字号：18px；
线高：27px；
填充：.5rem.5rem；
文本转换：大写；
宽度：100%；
}

您的问题在这一行：

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

为了设置/获取输入值，您需要使用

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

致：

而不是：

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

您可以减少到：

$( ".first-country input")

片段：

$（'.country list'）.hide（）；
$（“.first country input”）.focus（函数（）{
美元（“.country list”）。显示（300）；
});
$（“.first country”）。查找（'a'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var text=$this.text（）；
$（“.first country input”）.val（文本）；
$（“#国家列表”）.hide（300）；
})；

。国家/地区输入{
颜色：#2980B9；
字号：18px；
线高：27px；
填充：.5rem.5rem；
文本转换：大写；
宽度：100%；
}

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

$（'.country list'）.hide（）；
$（“.first country”）.find（'input'）.focus（函数（）{
美元（“.country list”）。显示（300）；
});
$（“.first country”）。查找（'a'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var text=$this.text（）；
$（“.first country”）.find（'input'）.attr（'value'，text）；
$（“.first country”）.find（'input'）.val（text）；//在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);
    });

$（'.country list'）.hide（）；
$（“.first country”）.find（'input'）.focus（函数（）{
美元（“.country list”）。显示（300）；
});
$（“.first country”）。查找（'a'）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
var text=$this.text（）；
$（“.first country”）.find（'input'）.attr（'value'，text）；
$（“.first country”）.find（'input'）.val（text）；//CSS与此有什么关系？（在标记中）Hi
val（）
是向输入添加值的正确函数，而不是
text（）
text（）用于在单击时从标记中获取文本，并且此$（“.first country”）.find（'input'）.attr（'value'，text）；；是文本添加到输入值的地方。CSS与此有什么关系？（在标记中）Hi
val（）
是向输入添加值的正确函数，而不是
text（）
text（）用于在单击时从标记中提取文本，这是$（“.first country”）。find（'input'）。attr（'value'，text）；；是将文本添加到输入值的地方。就是这样。谢谢。就是这样。谢谢。