javascript - 下拉列表自动填充到页面上的文本(非输入字段)

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 会是更好的选择，但它可能会带来不必要的复杂性