使用jquery將所選字段獲取到textarea中

我想從組合框中選擇選項以顯示在textarea中。 jsFiddle 使用jquery將所選字段獲取到textarea中

下面是HTML：

<select id="header-values" multiple="headervalues" style="width:200px" name="headervalues" > 
          <option selected="">MVA</option> 
          <option>Jet Ski</option> 
          <option>Bus Accident</option> 
          <option>Worker's Comp</option> 
          <option>field1</option> 
          <option>field2</option> 
          <option>field3</option> 
         </select> 
         <br> 
         <textarea id="headervalues-log" class="log" class="ui-widget-content"></textarea>

一旦我選擇任何選項，這表明被插入到textarea的，如果我再次選擇該選項下一個選項應該出現。

我試過下面的代碼，但沒有工作。無法弄清楚什麼是錯的，

/*$("select, #header-values").change(function(){ 
     var selecttext =$('#header-values : selected').val(); 
     var insertText = $(this).text(); 
     $('#headervalues-log').append(" "+insertText); 
    });*/ 

$("select, #header-values").change(function() { 
    var str = ""; 
    $("select option:selected").each(function() { 
     str += $(this).text() + " "; 
    }); 
    $("headervalues-log").text(str); 
})

來源

2013-05-29 patz

你可以這樣做：

$("#header-values").change(function() { 
    var selOption = $(this).find(":selected").text(); 

    $("#headervalues-log").text(selOption); 
});

演示：http://jsfiddle.net/QJ6yQ/7/

在結尾添加此行以進行多項選擇，並在從textarea刪除條目後選擇一個字段。

$("#headervalues-log").val(function() { 
    return this.value + selOption + ', ' }).prependTo("#headervalues-log"); 
});

來源

2013-05-29 17:53:36 tymeJV

它可以'var selOption = $（this）.find（「：selected」）。val（）;' – krishgopinath

@passionateCoder - 將其更改爲'var selOption = $（this）.find（「：selected」）。text（）;' - 我會使用'this.value'作爲值。 – tymeJV

我見過'this.value'在一些老版本的chrome和FF中表現怪異，所以我總是喜歡搜索下來的選項，並使用jquery的'.val（）' – krishgopinath

試試這個：

$("select#header-values").change(function() { 
    var str = ""; 
    $("select option:selected").each(function() { 
     str += $(this).text() + " "; 
    }); 
    $("#headervalues-log").val(str); 
})

檢查出來的jsFiddle

來源

2013-05-29 17:51:43

感謝yotam奧馬爾，但它不工作。 – patz

jsFiddle工作..我剛剛重新檢查.. –

如果你想選擇並從選擇框中刪除然後使用以下appendTo API

$('select option:selected').remove().appendTo($("#headervalues-log"));

其他明智的，只使用appendTo追加

$('select option:selected').appendTo($("#headervalues-log"));

來源

2013-05-29 20:58:00

使用jquery將所選字段獲取到textarea中

回答

相關問題