帶兩個值的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

回答

相關問題