1

別のドロップダウン メニューで既に選択されている内容に基づいて、ドロップダウン メニューにオプションを表示したいと考えています。最初のドロップダウンには 16 個のオプションがあるので、最初のドロップダウンの各選択に対して 2 番目のドロップダウンに異なるオプションを表示したいと考えています。javascriptまたはjqueryを使用してこれを行いたいと思います。

私のhtmlファイルの最初のドロップダウンは次のとおりです。

           <div>
               <label for="failureReason">Failure Reason:</label> <select
                    id="failureReason" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                    <option value="1">Damage</option>
                    <option value="9">Calibration Failure</option>
                    <option value="5">Component Failure</option>
                    <option value="93">Customer Request</option>
                    <option value="5">Error on Potted SUT</option>
                    <option value="41">Installation Error</option>
                    <option value="6">Interference</option>
                    <option value="46">Network Issue</option>
                    <option value="3">No Fault Found</option>
                    <option value="8">No Power/Fuse Blown</option>
                    <option value="23">Non-AMCS Issue</option>
                    <option value="49">OBC HW Issue</option>
                    <option value="30">OBC SW Issue</option>
                    <option value="2">Training Issue</option>
                    <option value="68">Truck Not Available</option>
                    <option value="51">Routine Maintenance</option>
                </select>
                <!-- Put in options for failure reason -->
            </div>

そして、「失敗の理由」で選択されたものに応じて、このドロップダウン内にさまざまなオプションを表示したいと思います。

<div>
                <label for="solutionId">Solution Id:</label> <select
                    id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                    <option value="1">Repaired</option>
                    <option value="2">Restarted</option>
                    <option value="3">Reinstalled Software</option>
                    <option value="4">Replaced Loadcell</option>
                    <option value="5">Replaced SUT</option>
                </select>
                <!-- Put in options for Solution Id -->
            </div>

他の例を見てきましたが、私が達成しようとしているものとは異なります。javascript ファイルの他の部分で使用するために表示され、選択されたオプションの「値」を取得できる必要があります。

編集：

私の質問が少し混乱していることに気づきました。もっと明確にしようと思います。失敗理由で「破損」を選択した場合、以下を表示したい:

<div>
            <label for="solutionId">Solution Id:</label> <select
                id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                <option value="1">Repaired</option>
                <option value="3">Reinstalled Software</option>
                <option value="4">Replaced Loadcell</option>
            </select>
            <!-- Put in options for Solution Id -->
        </div>

しかし、「キャリブレーションの失敗」が選択された場合は、次のことを示したいと思います。

<div>
            <label for="solutionId">Solution Id:</label> <select
                id="solutionId" data-theme="a" data-icon="arrow-d" data-iconpos="right">
                <option value="1">Repaired</option>
                <option value="2">Restarted</option>
                <option value="5">Replaced SUT</option>
            </select>
            <!-- Put in options for Solution Id -->
        </div>
4

4 に答える 4

1

すでに答えが得られていることを願っていますが、それは簡単な答えです。この投稿を確認してください。コメントする評判がないので、回答として投稿してください。この回答を確認してください。

別のドロップダウン ボックスの値に基づいて Javascript がドロップダウン ボックスのオプションを変更する

于 2015-11-05T09:13:04.300 に答える
0

最初のドロップダウンでイベントを使用し.change、値を取得して、必要なことを行います。

$("#failureReason").change(function() {
    var selected = this.value;
    var second = $("#solutionId option:selected").val();
});
于 2013-11-01T13:42:01.103 に答える