【问题标题】:Pass multiple select options text to textarea将多个选择选项文本传递到 textarea
【发布时间】:2013-02-24 05:25:53
【问题描述】:

我有一个表单,其中有几个选择框,其中一些是多选。到目前为止,我能够将文本值从每个选择框传递到文本区域;但是,我无法从多选框中传递多个选项。有人可以在这里帮忙吗?意思是,我想在多个选择框中传递所有选定的文本,而不仅仅是选择中的第一项。

我的代码不断返回“未定义”。在搜索这些论坛时,似乎使用 jQuery 'option:selected' 修饰符应该返回所有选定项目的文本。

function writeText(){
// get assign the values from each text input
var myCAPtext = document.getElementById('CAPoutput');

// assign multiple text values
var select_1 = $("#box1 option:selected").text();

var  CAPtext = select_1.value+"\n\n";
  myCAPtext.value = CAPtext;
  }

HTML

<select id="box1" multiple>
<option></option>
<option>first text</option>
<option>second text</option>
<option>third text</option>
<option>fouth text</option>
</select>

<input value="Write" onclick="writeText()" type="button"> <br>

<textarea id="CAPoutput">

【问题讨论】:

    标签: javascript jquery forms


    【解决方案1】:

    text返回一个字符串,String对象没有value属性,使用jQuery的val方法,它为多个选择元素返回一个值数组,那么你可以使用数组的join方法用于连接数组元素的对象:

    var select_1 = $("#box1").val();
    var CAPtext = select_1.join("\n\n");
    

    http://jsfiddle.net/ZCTRC/

    如果你想和onclick属性说再见:

    $('input[type=button]').click(function () {
        var myCAPtext = document.getElementById('CAPoutput');
        myCAPtext.value = $("#box1").val().join("\n\n");
    })
    

    【讨论】:

    • +1,似乎没有多少人注意到val() 会返回多个数组。
    • 嗨,效果很好。感谢您对解决方案进行详细说明。这确实有助于像我这样的编码新手变得更好。出于好奇,如果我在表单中添加了复选框或文本输入,我是否可以使用相同的语法结构将字符串值传递给我的文本框?
    • @user1837608 嗨,不客气,是的,但是对于那些元素val 返回一个string,所以你不能使用join 方法。
    • 还有一个问题,如果您不介意的话。当我完成我的表格时,我意识到有一些选择元素应该是可选的。我怎样才能最好地包含这些“可选”选择项,但如果不需要它们,请忽略它们?我正在考虑以某种方式将它与一个复选框联系起来,该复选框会提醒写入功能在选中的复选框之后包含任何选择框?在 jQuery 中是否已经构建了一些更简单的东西?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-11
    • 1970-01-01
    • 1970-01-01
    • 2015-08-07
    • 1970-01-01
    相关资源
    最近更新 更多