Question

在一个变量中包含两个ID，例如

var optionValue=document.getElementById('Input1' + " " + 'Input2');

该代码不起作用，但有没有类似的代码可以做到这一点？

JS

function addNewListItem(){
var htmlSelect=document.getElementById('list');
var value1 = document.getElementById('Input1').value;
var value2 = document.getElementById('Input2').value;
var optionValue = value1 + " " + value2;
var optionDisplaytext = value1 + " " + value2;

var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionDisplaytext.value;
htmlSelect.add(selectBoxOption, null);
alert("Option has been added successfully");
return true;

}

HTML

<table border="0" align="left">
<tr>
<td rowspan="2">
    <select name="list" id="list" size="10" style="width:150px">
    </select>
    </td>
<tr>
<td align="right">Option Value</td>
<td align="left"><input name="Input1" type="text" id="Input1" /></td>
</tr>
<tr>
<td align="right">Option Display Text</td>
<td align="left"><input name="Input2" type="text" id="Input2" /></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td align="left"><input name="btnAddItem" type="button" id="btnAddItem" value="Add Option" onclick="javaScript:addNewListItem();" /></td>
</tr>
</table>

我已尝试过上面的代码，但它不会添加到列表框中？它只是在框中说未定义

Answer 1

元素是文本输入？那么下面的内容就可以了：

var value1 = document.getElementById('Input1').value;
var value2 = document.getElementById('Input2').value;
var optionValue = value1 + " " + value2;

Answer 2

我将您的问题解释如下：

按ID获取n个元素。

您可以使用以下块执行此操作：

<强> HTML

<span id="foo">Foo</span>
<span id="bar">Bar</span>
<span id="foo1">Foo</span>
<span id="bar1">Bar</span>

<强> JS

var nodes = document.querySelectorAll('#foo, #bar');
console.log(nodes);

然后，您可以从每个匹配的节点派生您想要的任何数据。

Answer 3

继续我留下的评论，这是一个完整的例子。

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);

function mInit()
{
    byId('mBtn').addEventListener('click', onBtnClick, false);
}

function onBtnClick()
{
    var value1 = document.getElementById('Input1').value;
    var value2 = document.getElementById('Input2').value;
    var optionValue = value1 + " " + value2;

    var newOpt = newEl('option');
    newOpt.value = optionValue;         // this line sets the value given to a form by this option

    newOpt.appendChild( newTxt(optionValue) );  // this line adds the text viewable on the page

    byId('mSelect').appendChild(newOpt);
}

</script>
<style>
</style>
</head>
<body>
    <label>Input 1: <input id='Input1' value='value1'/></label>
    <label>Input 2: <input id='Input2' value='value2'/></label>
    <br>
    <select id='mSelect'></select><button id='mBtn'>Add to list</button>
</body>
</html>

将两个输入字段组合成一个变量

3 个答案: