堆棧內存溢出
  簡體   English   中英

使用Textarea進行jQuery SELECT

[英]jQuery SELECT with Textarea

 原文  2015-03-25 05:19:43  2   8    javascript/ jquery

問題描述

只是想知道是否有人可以幫助我解決問題，我不完全了解為什么它不起作用。

我有這個小提琴， http：//jsfiddle.net/uomt99zp/

它在做什么：從下拉框中選擇時，將該單詞插入到textarea中。 當textarea沒有被“觸及”時，它做了什么。

如果您在框中鍵入內容，然后嘗試選擇一個項目，它將無法正常工作。

我不確定為什么這不會更新textarea。 也許有人可以對這個問題有所了解？ 

<textarea name="template" required="required" class="template form-control" rows="6"></textarea>
<select class="templatesAvailableFields">
<option>Select One</option>
    <option>Test1</option>                     
    <option>Test2</option>
    <option>Test3</option>
</select>

$('.templatesAvailableFields').on('change', function() {
        var text = $('.templatesAvailableFields option:selected').text();
        $('.template').append(text);
});

8 個解決方案

解決方案1
 7 已采納  2015-03-25 05:21:52

您需要使用.val()設置值： 

$('.template').val($('.template').val()+text);

工作演示1

另外.val()可以有回調函數，可用於設置新值：

function類型：Function（整數索引，字符串值）=> String將值返回到set的函數。 這是當前的元素。 接收集合中元素的索引位置和舊值作為參數。 

$('.template').val(function(i,v){ return v+ text});

工作演示2

解決方案2
 1  2015-03-25 05:27:56

您可以嘗試使用舊值+新文本添加val（函數） ， 

$('.templatesAvailableFields').on('change', function() {
    var text = $('.templatesAvailableFields option:selected').text();
    $('.template').val(function(ind,val){
         return val+text;
    });
});

現場演示

解決方案3
 1  2015-03-25 05:37:24

要回答“為什么”它不起作用，這是因為，textarea的內容代表其默認值。 因此，當您將元素追加到textarea時，您可以更改此textarea的默認值。

因此，只要您沒有輸入，它就會更改textarea。一旦您輸入，即使您刪除了textarea的所有文本，也不會再使用默認值。

解決方案4
 0  2015-03-25 05:26:16

通過使用.append，你只是簡化你的輸出字符串，如果你只想要下拉元素，最好使用.text（）或.val（）方法

解決方案5
 0  2015-03-25 05:28:52

$('.templatesAvailableFields').on('change', function() {
    var text = $('.templatesAvailableFields option:selected').text();
var existing=$('.template').val();

    $('.template').val(existing+text);
});

.append（）,. html（）和.text（）方法不適用於表單元素，用於設置/獲取from元素的值。應該使用.val（）方法：

解決方案6
 0  2015-03-25 05:37:21

你的代碼正在運行...我在visual studio中嘗試過....只有我所做的改變是我將腳本保留在選項控件下...我不確定。對我來說它的工作正常。 

<body >
<textarea name="template" required="required" class="template form-control" rows="6"></textarea>
<select class="templatesAvailableFields">
<option>Select One</option>
    <option>Test1</option>                     
    <option>Test2</option>
    <option>Test3</option>
</select>
 <script type="text/javascript">

     $('.templatesAvailableFields').on('change', function () {
         var text = $('.templatesAvailableFields option:selected').text();
         $('.template').append(text);
     });
    </script>
</body>

解決方案7
 0  2015-03-25 05:52:32

您應該使用val（）方法控制輸入值 

// cache element
var $select = $('.templatesAvailableFields');

$select.change( function() {
  $('.template').val($select[0].value);
});

解決方案8
 -1  2015-03-25 05:23:18

只需用文字替換附加

這是更新的小提琴 

$('.templatesAvailableFields').on('change', function() {
    var text = $('.templatesAvailableFields option:selected').text();
    $('.template').text($('.template').text() + text);

// $（'。template'）。val（text）; 這不適用於IE <= 7}）; 

http://jsfiddle.net/rrehan/uomt99zp/2/

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery-在選擇更改時清除文本區域 選擇textarea jquery中的所有文本 使用jquery在TinyMCE textarea中選擇一個范圍 使用jQuery通過textarea選擇下拉值 JS / jQuery：如何在textarea中突出顯示或選擇文本？ jQuery更改textarea以基於select進行讀寫 根據選擇將類添加到textarea（jQuery到javascript） jQuery - 從textarea中選擇所有文本 jQuery：強制用戶從文本區域中的自動完成建議中選擇一個值 jQuery：轉換textarea（用新行分隔）以選擇選項菜單
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM