向輸入字段添加值

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），value屬性已更改，但是blabla仍然寫在輸入上，並且js將其作為值輸出，而不是來自value屬性的字符串。

我做錯了。 如果更容易理解我遇到的麻煩，這里正在努力。

扭動小提琴

謝謝

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