javascript - 2 つのドロップダウン メニュー リストでオプションを選択していますか?

Question

2 つのメニュー リストを作成したいのですが、各リストからオプションを選択し、[次へ] ボタンをクリックして別のページに移動する必要があります。

ここにリンクがあります: http://home.comcast.net/~techjunkee/

Answer 1

SELECT 要素の ID を変更したことに注意してください。これは、JavaScript で特定の要素を見つけやすくするために行いました。これが機能するには、各要素に独自の ID が必要です。

<select id="jumpMenu1">
 <option value="0">Choose</option>
 <option value="">13</option> 
 <option value="">14</option> 
 <option value="">15</option> 
 <option value="">16</option> 
 <option value="">16.5</option> 
 <option value="">17</option> 
 <option value="">17.5</option> 
 <option value="">18</option> 
 <option value="">19.5</option> 
 <option value="">20</option> 
 <option value="">21</option> 
 <option value="">22</option> 
 <option value="225.html">22.5</option> 
 <option value="">24</option> 
 <option value="245.html">24.5</option> 
</select>

<select id="jumpMenu2">
 <option value="0">Choose</option>
 <option value="">11</option> 
 <option value="">12</option> 
 <option value="">13</option> 
 <option value="">16</option> 
 <option value="">16.5</option> 
 <option value="">17</option> 
 <option value="">17.5</option> 
 <option value="">18</option> 
 <option value="">19.5</option> 
 <option value="">20</option> 
 <option value="">21</option> 
 <option value="">22</option> 
 <option value="225.html">22.5</option> 
 <option value="">24</option> 
 <option value="245.html">24.5</option> 
</select>

<input type="button" value="Next" onclick="goToPage();" />

...そして JavaScript の場合:

function goToPage()
{
  var jumpMenu1Value = document.getElementById("jumpMenu1").value;
  var jumpMenu2Value = document.getElementById("jumpMenu2").value;

  if(jumpMenu1Value !== 0 && jumpMenu2Value !== 0)
  {
    window.location = "someplace.html?jumpMenu1=" + 
                      jumpMenu1Value + "&jumpMenu2=" + 
                      jumpMenu2Value;
  }
}

Answer 2

次の 2 つのオプションがあります。

1) 毎回同じページにリダイレクトしますが、ページが読み込まれるときにクエリ文字列の値を確認し、その値に基づいて必要なコンテンツを表示する必要があります。これは、クエリ文字列から値を取得する方法です。

protected void Page_Load(オブジェクト送信者, EventArgs e)

{

 double jumpMenu1; 

 double jumpMenu2;

 try{jumpMenu1 = double.Parse(Request.QueryString["jumpMenu1"]);}catch {jumpMenu1 = 0;}

 try{jumpMenu2 = double.Parse(Request.QueryString["jumpMenu2"]);}catch {jumpMenu2 = 0;}

}

2) また、これら 2 つの選択値の値に基づいて、JavaScript から別のページにリダイレクトします。

関数 goToPage()

{

var jumpMenu1Value = document.getElementById("jumpMenu1").value;

var jumpMenu2Value = document.getElementById("jumpMenu2").value;

if(jumpMenu1Value !== 0 && jumpMenu2Value !== 0)

{

 switch (jumpMenu1Value)

 {

     case 13:

     {

        switch (jumpMenu1Value)

        {

           case 11:

           {

              // the page coresponding to the Rim Size "13" and Tire Size "11"

              window.location = "someplace13-11.html"; 

              break;

           }

           case 12:

           {

              // the page coresponding to the Rim Size "13" and Tire Size "12"

              window.location = "someplace13-12.html"; 

              break;

           }

           //...

           default:

           {

              // redirect to a default/error page or show an error message

           }

        }

     }

     case 14:

     {

        switch (jumpMenu1Value)

        {

           case 11:

           {

              // the page coresponding to the Rim Size "14" and Tire Size "11"

              window.location = "someplace14-11.html"; 

              break;

           }

           case 12:

           {

              // the page coresponding to the Rim Size "14" and Tire Size "12"

              window.location = "someplace14-12.html"; 

              break;

           }

           //...

           default:

           {

              // redirect to a default/error page or show an error message

           }

        }

     }


     //...   

     default:

     {

        // redirect to a default/error page or show an error message

     }

  }

}

else

{

   //show an error message, the user has to choose both options!

}

}

Answer 3

あなたが提供したスクリプトは機能しますが、「someplace.html」の代わりに別のページをターゲットにする方法がわからないと思います

この値は、この URL ( http://home.comcast.net/~techjunkee/index.html?jumpMenu1=1&jumpMenu2=5 )を翻訳する方法を混乱させました。

鳥脳ですみません。私はこれを学ぼうとしています。