web-dev-qa-db-ja.com

ドロップダウンの選択に基づいてフィールドに動的に入力します（Javascript / HTML）

会社のウェブサイトのコーディングに役立つ情報を探しています。ドロップダウンボックスからの選択に基づいて、カスタムの「部品番号ジェネレーター」を作成しようとしています。私たちの目標は、ユーザーがドロップダウンボックスでオプションを選択すると、そのオプションが下のボックスに動的に入力され、最終的に部品番号が作成されることです。添付のスクリーンショットは、デザインと出力ボックスが必要な場所を視覚的に表したものです。 JavaScriptとHTMLでそれを行うことを目指しています。

選択に基づいて出力を生成するボックスだけを取得するために現在使用しているコードは次のとおりです。

<script type="text/javascript">
// Pre populated array of data
var myData = new Array();
myData[1] = 'Some text';
myData[2] = 'Some other text';
</script>

<form id="example" name="example">
    <select id="selector" name="selector">
        <option value="" selected></option>
        <option value=1>One</option>
        <option value=2>Two</option>
    </select>
    <br />
    <input type="text" value="" id="populateme" name="populateme" />
</form>

<script type="text/javascript">
    document.example.selector.onchange = updateText;

    function updateText() {
      var obj_sel = document.example.selector;
      document.example.populateme.value = myData[obj_sel.value];
}
</script>

このWebサイトを少し検索して、動的フィールドポピュレーションの解決策をいくつか見つけましたが、2番目のフォームを追加するか、出力が含まれるボックスを移動しようとすると、コードが機能しなくなります。ドロップダウン選択を使用して複数のフィールドにデータを入力した経験がある人はいないかと思いました。必要に応じて詳細情報を提供できます。メッセージを送信するか、以下にコメントしてください。

画像に関する情報：この画像は、現在のJoomla Form拡張機能とPhotoshopを使用して作成され、私たちが望むものをすべての人に示しています。灰色のボックスやフォーマットは気にしません。出力ボックスを下に移動する（水平に並べる）コードに問題があり、オプションが垂直にあるだけです。

スクリーンショットへのリンク

javascripthtmlformsdynamicpopulation
5
FlexMarket

最も簡単な解決策（アレイなし）：

<html>

<body>
<form id="example" name="example">
        <select id="sensor" onchange="updateText('sensor')">
        <option value="J">J</option>
        <option value="K">K</option>
    </select>

    <select id="voltage" onchange="updateText('voltage')">
        <option value="120V">120V</option>
        <option value="240V">240V</option>
    </select>

    <br />
    <input type="text" value="" id="sensorText" /> <input type="text" value="" id="voltageText" />
</form>

<script type="text/javascript">

function updateText(type) { 
 var id = type+'Text';
 document.getElementById(id).value = document.getElementById(type).value;
}
</script>
</body>

</html>

ハッシュ配列を使用するように、非常に複雑にすることもできます。複雑な解決策が必要な場合はお知らせください。

8
webtrick101