下拉列表自动填充为页面上的文本（非输入字段）

Question

我试图使下拉选项填充多个选择，但不作为输入字段。

这是一个作为输入字段的示例，但是我不确定如何通过[strong] / [div]或其他方式将其更改为仅在页面上显示文本。

http://jsfiddle.net/zunrk/

var ids = new Array();
var use = new Array();
var ful = new Array();

ids[0] = "";
use[0] = "";
ful[0] = "";

ids[1] = 6;
use[1] = "bsmith";
ful[1] = "Buddy Smith";

ids[2] = 2;
use[2] = "lsmith";
ful[2] = "Libbie Smith";

ids[3] = 4;
use[3] = "asmith";
ful[3] = "Andy Smith";


    function Choice() {
        //x = document.getElementById("users");
        y = document.getElementById("selectUsers");

          //x.value = y.options[y.selectedIndex].text;
          document.getElementById("ids").value = ids[y.selectedIndex];
          document.getElementById("use").value = use[y.selectedIndex];
          document.getElementById("ful").value = ful[y.selectedIndex];
     }

<form name="form1" method="post" action="">
<select id="selectUsers" name="users" onChange='Choice();'><option> </option>
<option value="1">bsmith</option>
<option value="2">lsmith</option>
<option value="3">asmith</option>
</select>
<p>ids <input type="text" id="ids" name="id" ></p>
<p>use <input type="text" id="use" name="username" ></p>
<p>ful <input type="text" id="ful" name="full_name" ></p>
</form>

Answer 1

您可以使用任何元素代替<input /> ，例如<span /> 。 区别在于您设置了.innerHTML [1]而不是.value ，因此请使用

<p>ids <span id="ids"></span></p>

和

document.getElementById("ids").innerHTML = ids[y.selectedIndex];

设置元素的HTML而不是输入值。

http://jsfiddle.net/zunrk/171/

[1] innerText / textContent是一个更好的选择，但它可能会引入不必要的复杂性

Answer 2

使用dom元素的innerHtml属性

document.getElementById("ids").innerHTML = ids[y.selectedIndex];

细节：

http://www.w3schools.com/jsref/prop_html_innerhtml.asp

Answer 3

如果要以完成的方式初始化数组，则可以如下进行设置，而不是单独设置每个数组项。

var ids = new Array();
var use = new Array();
var ful = new Array();

ids=["",6,2,4];
use=["","bsmith","lsmith", "asmith"];
ful=["","Buddy Smith","Libbie Smith", "Andy Smith"]

除此之外，我的回答与pawel所建议的没有太大不同，但是它是一个更干净的解决方案……无论如何它都不是很棒的代码，但是考虑到您是初学者并且我不愿意做，这是一个很好的选择它太复杂了。 享受编码:) => http://jsfiddle.net/zunrk/172/