0

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

2 回答 2

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>
于 2012-12-19T01:14:18.303 回答
0

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

试试下面的代码（这里有一个 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 并没有什么坏处。有了这样的库，事情变得容易多了。

于 2012-12-19T01:28:51.787 回答