如何在一个框中显示多个选定的值?
我正在制作一个表格,当我选择产品的familyname时,它的值将显示在一个框中(我不知道该用什么来显示它),并且该框不能被编辑(只能被读取)。如何在一个框中显示多个选定的值?
-HTML
<select name="fnme" onchange="setText(this)" multiple>
<option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option>
<option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option>
<option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option>
<option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option>
</select>
<td><textarea rows="10" cols="30" name="textBox" id="disabled" value=""/ disabled></textarea></td>
</br>
<p><input type="submit" value="Save"></p>
-ASPCode
<%
DIM fnm,element
fnm=Split(Request("fnme"),"\n")
FOR EACH element IN fnm
Response.Write("<p>--qq-- " & trim(element) & " </p>")
Next
%>
现在我使用的文本区域,但仍然有许多显示值的问题,它显示在一个选定值。
-JS
<script>
function setText(obj) {
var val = obj.value;
document.getElementById('textBox').value = val;
}
</script>
我想知道这是可以显示多个值?
当你这样做:
var val = obj.value;
你只拿到第一选择的选项的值,不是所有的人(除非你使用像jQuery的)。
和正斜杠在:
<textarea ... id="disabled" value=""/ disabled>
也没有帮助。我会认为这只是一个发布错误。
function getMultiSelectValue(select) {
return [].reduce.call(select.options, function(values, option) {
option.selected? values.push(option.value) : null;
return values;
}, []);
}
function showValues(values){
document.getElementById('ta').value = values.join('\n');
}
<select onchange="showValues(getMultiSelectValue(this))" multiple>
<option value="0">0
<option value="1">1
<option value="2">2
</select>
<textarea id="ta" rows="3" readonly></textarea>
我在IE上尝试这个,它没有工作,但它在铬上工作,这要感谢我学习一些新的东西,例如一次调用两个函数。我仍然试图找到如何在IE上工作,谢谢:D – Far
哪个版本的IE不起作用?我知道IE 8不喜欢将主机对象作为* this *传递给内置Array方法,但它应该有一个[* polyfill *](https://developer.mozilla.org/en-US/docs/) Web/JavaScript/Reference/Global_Objects/Array/Reduce),所以不应该成为问题。我希望这可以在IE 9+中工作(但我暂时无法测试)。 – RobG
我使用的是IE 11版本,我会尝试学习polyfill,谢谢 – Far
我认为这可以帮助你。
<html>
<body>
<form action="" name="tof">
<select name="fnme" onchange="setText(this)" multiple>
<option value="STR12(12,YU,IO)">STR12(12,YU,IO)</option>
<option value="STR13(13,YU,IO)">STR12(13,YU,IO)</option>
<option value="STR14(14,YU,IO)">STR12(14,YU,IO)</option>
<option value="STR15(15,YU,IO)">STR12(15,YU,IO)</option>
</select>
<textarea id="res" readOnly></textarea>
</form>
<p id="demo"></p>
<script>
function setText(ob){
var selected_options = document.forms['tof']['fnme'].selectedOptions
var selected_options_values = []
for(i=0; i<selected_options.length; i++){
\t selected_options_values.push(selected_options[i].value)
}
\t document.getElementById('res').value = selected_options_values.join('\n')
}
</script>
</body>
</html>
它不适用于IE11,但在Chrome浏览器上工作:)我正在寻找我们可以在IE11上使用的位置 – Far
凡具有'textBox'的ID texbox? –
只要做到这一点:'document.getElementById('disabled')。value + = val;'你就完成了! –
@DhavalMarthak它的作品wahhh谢谢你thankyou – Far