0

単純なプロトタイプ専用であるため、データベースを使用せずに JavaScript または JS ライブラリを使用して選択メニューの条件付きセットを構築する必要があります。しかし、私は JS の初心者であり、解決策を見つけることができませんでした。

機能していないビジュアル リファレンスは次のとおりです。

http://jsfiddle.net/js_noob/n3Fwg/

スタック オーバーフローでは、JSFiddle からコードを投稿する必要があります。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Two Part Select</title>
<style>
    p, select {
    float: left;
}
br {
    clear: both;
    margin: 0;
    padding: 0;
    height: 0;
}
form {
    margin-top: 0;
    padding-top: 0;
}
</style>
</head>

<body>
<p style="margin-left: 20px;">A</p>
<p style="margin-left: 50px;">B</p>
<br>
<form>

<select style="float: left;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>


<select style="float: left; margin-left: 20px;">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>

<button style="float: left; margin-left: 20px;">Submit</button>

</form>

<br>

</body>
</html>

必要な機能の説明は次のとおりです。

選択メニュー A には、メニュー B と同様に 1 から 13 までの数字があります。それらは連鎖していませんが、必要な条件付きの側面があります。たとえば、メニュー A で「5」を選択し、メニュー B で「7」を選択したとします。送信時に、その特定の組み合わせに固有のファイルをプルする必要があります。例として「57.html」と呼びましょう。または、メニュー A で「4」が選択され、メニュー B で「8」が選択された場合、送信時に「48.html」というファイルがプルされます。

私が見つけた 2 つの選択メニューが連携して動作するオンライン デモはすべて、最初のメニューで何かを選択した後に 2 番目のメニューが読み込まれる連鎖メニューを持っているようですが、それは私が望んでいるものではありません。例えば：

http://javascript.about.com/library/bldydrop1.htm

私の場合、この 2 つを連携させる必要がありますが、メニュー B の番号は常に表示されている必要があり、適切なファイルを呼び出すためにメニュー A の番号選択を参照します。

私の説明は理にかなっていますか？これが何と呼ばれるかはわかりませんが、ここ数日間解決策を探しましたが、探しているものを正確に見つけることができませんでした. 誰かが私を正しい方向に向けるための提案や観察があれば、彼らは非常に高く評価されます.

ありがとう！

4

1 に答える 1

0

あなたが求めていることは、「連鎖」や「条件」とは何の関係もありません。あなたがしているのは、送信するときに、2 つの選択のそれぞれの値を見て、それらを結合し、最後に「.html」を貼り付けてから続行することだけです。

あなたは JS が初めてだと言ったので、ここに jQuery を使用する文書化されたフィドルがあります (これにより、あなたの人生はずっと簡単になります)。 http://jsfiddle.net/manishie/vPJ9B/

改訂された HTML (2 つの要素の ID を追加しました):

<select id="select1" style="float: left;">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
</select>
<select id="select2" style="float: left; margin-left: 20px;">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
</select>

Javascript:

// tell jquery to wait until the document has loaded
$(function () {

    // setup an event handler to respond to the submit event
    $('button').click(function (event) {

        //combine the two values
        alert($('#select1').val() + $('#select2').val() + '.html');

        // for the purposes of this demo, disable the actual submit
        event.preventDefault();
    });
});
于 2013-10-05T06:24:27.483 に答える