Question

如何使用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"/>

Answer 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

<强>更新既然你不明白我发布了什么，我继续前进，并添加了一个完整的，完全编码和测试的解决方案。这实际上是通过在代码中添加eventlistener而不是在selectbox本身上再添加一步：

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

Answer 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开始没有任何害处。对于像这样的库，事情变得更容易很多。

document.getElementById有两个值

2 个答案: