0

document.getElementById で 2 つの値を取得するにはどうすればよいですか?

私はこのコードを持っています。ここでは、選択ボックスから 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 を使用したい場合は、次のように、選択したインデックス値を取得してそれ自体に渡すために、2 回実行する必要があります。

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

更新: あなたは私が投稿した内容を理解していないので、先に進み、完全に完全にコード化され、テストされたソリューションを追加しました。これは、selectbox 自体ではなく、コードに eventlistener を追加することで、実際にはもう 1 ステップ進みます。

<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 を使用した Web ページ操作が初めての場合は、jQuery ライブラリを使用することをお勧めします。生の JavaScript を使用してこれらすべてを行う方法を学習することには価値があります。それを行う必要があります。jQueryの使い方に慣れたら。なんで？時は金なりであり、ビジネスは遅かれ早かれ生産性を高めたいと考えているため、最初に jQuery から始めても害はありません。そのようなライブラリを使用すると、物事がずっと簡単になります。

于 2012-12-19T01:28:51.787 に答える