具有两个值的 document.getElementById [关闭]答案

【问题标题】：document.getElementById with two values [closed]具有两个值的 document.getElementById [关闭]
【发布时间】：2012-12-06 07:28:20
【问题描述】：

如何使用 document.getElementById 获取两个值？

我有这段代码，我试图从选择框中获取 kontypeID 和 kontypeTitel 以写入文本字段：

<select id="select" name="select" onchange="run()">                  
<?php
    $virksomhedsID = $_SESSION['virkID'];
    $sql = "SELECT * FROM konkurrenceType ORDER BY konkurrenceType.kontypeID";
    $result = mysql_query($sql) or die(mysql_error());                  

    echo '<option value="Vælg type">Vælg type</option>';

    while($rowSelect = mysql_fetch_assoc($result))
    { 
        $kontypeID = $rowSelect['kontypeID'];
        $kontypeTitel = $rowSelect['kontypeTitel'];             
        echo '<option value="' . $kontypeID . '">' . $kontypeTitel . '</option>';
    }
?>                    
</select>

<script>
    function run() {
        var select = document.getElementById("select");
        document.getElementById("valgtID").value = valgtTitel.options[select.selectedIndex].innerHTML;
        document.getElementById("valgtTitel").value = valgtTitel.options[select.selectedIndex].innerHTML;
    }
</script>

<input type="text" name="valgtID" id="valgtID"/>
<input type="text" name="valgtTitel" id="valgtTitel"/>

【问题讨论】：

你有两个相同id的元素吗？
没有。 document.getElementById 只返回第一次出现。但是，如果你真的需要它们，你可以使用document.querySelectorAll("#id")。
不，我有 $kontypeID = $rowSelect['kontypeID']; $kontypeTitel = $rowSelect['kontypeTitel'];从我需要编写以分隔文本字段的选择框
document.querySelectorAll("#id") 长什么样子？
您是说您希望能够同时将 2 个不同文本区域的值设置为相同的文本？

标签： javascript getelementbyid

【解决方案1】：

使用 jQuery 可以获取当前选中选项的值和文本：

$('#select').val();
$('#select').text();

或者您可以获取特定选项的值：

$("#select option[value='2']").val();
$("#select option[value='2']").text();

如果您真的想使用 getElementById，那么您必须执行两次才能获取选定的索引值并将其传递给自身，例如：

document.getElementById("select").options[document.getElementById("select").selectedIndex].value //accesses value attribute of selected option
document.getElementById("select").options[document.getElementById("select").selectedIndex].text //accesses text of selected option

更新： 由于您不理解我发布的内容，因此我继续添加了一个完整且完全编码和测试的解决方案。通过在代码中而不是在选择框本身上添加事件监听器，这实际上更进一步：

<html>
<body>
<select id="select">
     <option value="0" id="0">Select</option>
     <option value="1" id="titel 1">titel 1</option>
     <option value="2" id="titel 2">titel 2</option>
     <option value="3" id="titel 3">titel 3</option>     
</select><br><br>

ID<input type="text" id="id">
Titel<input type="text" id="titel">

<script type="text/javascript">
    document.getElementById("select").onchange = function () {

        document.getElementById("id").value = document.getElementById("select").options[document.getElementById("select").selectedIndex].value;

        document.getElementById("titel").value = document.getElementById("select").options[document.getElementById("select").selectedIndex].text;

    };
</script>
</body>
</html>

【讨论】：

我刚刚试过了，但它不起作用，你能告诉我更具体的吗？
如果你想使用 jQuery 方法，你必须在页面的中包含 jQuery 库。你可以下载它here。
为什么你会“做两次”而不是先做一次然后保存？
喜欢：
对不起@ErikE，你是绝对正确的。我删除了我的评论以避免对 OP T-T 造成混淆，当我发表评论时是深夜，但这并不是一个真正的借口。感谢您纠正我

【解决方案2】：

您正在使用valgtTitel.options，但我没有看到valgtTitel 在任何地方声明或设置。你是说select.options吗？

试试下面的代码（和here's a jsfiddle试试）：

function run() {
   var select = document.getElementById("select"),
      option = select.options[select.selectedIndex];
   document.getElementById("id").value = option.id;
   document.getElementById("titel").value = option.innerHTML;
}

如果您不熟悉 javascript 或不熟悉使用 javascript 进行网页操作，我建议您使用 jQuery 库。值得学习如何使用原始 javascript 来完成所有这些工作——你应该这样做。之后你开始使用 jQuery。为什么？因为时间就是金钱，您的企业希望您尽快提高生产力，因此首先使用 jQuery 并没有什么坏处。有了这样的库，事情变得很多容易了。

【讨论】：

你居然先推荐jQuery？这就是为什么人们在这里有这么多问题的原因。他们在了解某物如何/做什么之前就使用了东西，而且他们可能会继续以错误的方式使用它。
@ErikE 我有这个 $kontypeID = $rowSelect['kontypeID']; $kontypeTitel = $rowSelect['kontypeTitel'];您的 run() 示例写出相同的值..？
为什么要回答问题？我们没有足够的细节！！！你想达到什么目的？ 您必须告诉我们更多信息，否则我们无法为您提供帮助。听起来您可能混淆了服务器端和客户端变量的概念。在您的网络服务器上运行的代码具有浏览器无法访问的变量。浏览器可以访问的唯一内容是那些使用echo 发送给客户端的内容。所有服务器端代码都运行，创建一个页面，然后客户端拥有该页面的静态副本。变量之间没有相互作用。
@ErikE 我把它作为答案，因为这样更容易粘贴代码。让我试着更好地解释一下。我试图将一堆团队连接到一场比赛中。而我现在正在做的是尝试从用户选择的竞争中获取值 ($kontypeID = $rowSelect['kontypeID']; $kontypeTitel = $rowSelect['kontypeTitel'];)。我希望将这些值写入每个输入文本字段中，以便我可以使用这些值插入到 db 中，并在复选框中选择团队。所以现在我想把 kontypeID 写在一个 texfield 和 kontypeTitel 在另一个文本字段中
你可以看到我想对她做什么jsfiddle.net/wnmcL/40