带两个值的document.getElementById

如何通过document.getElementById获取两个值？带两个值的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"/>

来源

2012-12-19 M Nielsen

你有两个具有相同'id'的元素吗？ – Blender

编号'document.getElementById'只返回第一个外观。但是，如果你真的需要它们，你可以使用'document.querySelectorAll（“＃id”）'。 – Bergi

不，我有 $ kontypeID = $ rowSelect ['kontypeID']; $ kontypeTitel = $ rowSelect ['kontypeTitel']; 从我需要写入单独文本框的选择框 –

您使用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开始。事情变得像lot更容易与这样的图书馆。

来源

2012-12-19 01:28:51 ErikE

你真的首先推荐jQuery？这就是为什么人们在这里有这么多问题。他们在理解如何/做什么之前使用了东西，而且他们可能继续以错误的方式使用它。 – Ian

@ErikE我有这个$ kontypeID = $ rowSelect ['kontypeID']; \t \t \t \t \t $ kontypeTitel = $ rowSelect ['kontypeTitel'];你的run（）的例子写出相同的值..？ –

你为什么回答一个问题？我们没有足够的细节！你想达到什么目的？ **你必须告诉我们更多或我们无法帮助你**。这听起来好像你在混淆服务器端和客户端变量的概念。在您的Web服务器上运行的代码具有*从浏览器*无法访问的变量。浏览器只能访问使用'echo'发送给客户端的东西。所有服务器端代码都运行，创建一个页面，然后客户端拥有该页面的静态副本。没有变量的相互作用。 – ErikE

使用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

UPDATE： 既然你不明白我已经发布我继续前进，并添加了完整的，完全编码和测试的解决方案。这实际上通过添加代码的事件侦听，而不是在选择框本身更进了一步：

<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>

来源

2012-12-19 01:14:18

我刚刚试过，但它不起作用，你能告诉我更具体吗？ –

如果您想要使用jQuery方法，您必须将jQuery库包含在页面的中。你可以下载它[这里]（http://jquery.com/download/）。 –

你为什么要“这样做两次”，而不是做一次之前存储它？ – Ian

带两个值的document.getElementById

回答

相关问题