jQuery：如何將單擊的元素放入輸入框？

Question

我正在嘗試獲取一個列表。

我有，我想存儲列表的空輸入框：瑪麗·凱特，布洛克

現在我已經在它的三個名稱選擇列表。我想知道如何將從選擇列表中點擊的名稱轉移到輸入框中。如果我點擊第二個名字，請添加逗號以區分前一個名稱。

感謝您的幫助。我不知道在哪裏/如何開始這個:(

Answer 1

如何：

<input type="text" id="name" name="name" /> 

<select name="names" id="names"> 
    <option value="Mary">Mary</option> 
    <option value="Kate">Kate</option> 
    <option value="Brock">Brock</option> 
</select> 

<script> 
$(document).ready(function() { 
    $("#names").change(function() { 
     name = $(this).val(); 
     current = $("#name").val(); 
     if (!$("#name").val()) { 
      $("#name").val(name); 
     } else { 
      if (current.indexOf(name) == -1) { 
       $("#name").val(current + ', ' + name); 
      } 
     } 
    }); 
}); 
</script> 

添加新的名稱列表的末尾，只增加了一個逗號，當有多個名字，現在允許重複。

Answer 2

那麼你可以從輸入元素得到的值與$('#the_id').val();，你可以用相同的方式操縱輸入元素的值：$('#the_id').val('new value');。與.click處理程序，你應該準備就緒：

$('#selector').click(function(){ 
    var $names = $('#names') 
    $names.val($names.val() + ', ' + $(this).val()); 
}); 

Answer 3

嘗試使用change事件：

$('#listbox').change(function(){ 
    var selectedName = $('#listbox option[value='+$(this).val()+']').text(); 
    $('#input-for-insert').append(selectedName); 
}); 

我覺得你讓自己逗號分隔）

Answer 4

<input type="text" id="name" name="name" /> 

<select name="names" id="names"> 
    <option value="Mary">Mary</option> 
    <option value="Kate">Kate</option> 
    <option value="Brock">Brock</option> 
</select> 

<script> 
    $(document).ready(function() 
    { 
     // When the names selection changes 
     $("#names").change(function() 
     { 
      // Get the new name from this selection list 
      newName = $(this).val(); 

      // Get any names currently in the input box 
      currentName = $("#name").val(); 

      // Change the value of the name box by adding the newName followed by a comma 
      // followed by the current names 
      $("#name").val(newName + ", " + currentName); 
     }); 
    } 
</script>