Question

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

以下是输入字段的示例，但我不知道如何通过[strong] / [div]或其他方式更改此内容以在页面上创建文本。

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建议没什么不同，但它有点干净利落的解决方案...不是任何意思都不是很好的代码，但考虑到你是初学者和我，这是一个很好的作品不想让它变得太复杂。享受编码:) =＆gt; http://jsfiddle.net/zunrk/172/

下拉菜单自动填充到页面上的文本（非输入字段）

3 个答案: