使用JavaScript動態下拉表單

我真的很想使用JavaScript下拉表單。我需要它從根本上創造一個問題。工作原理：主頁上的人將點擊「創建問題」，它將轉到創建問題頁面。在那個頁面上，它問這個人的第一個問題是「你想問什麼類型的問題？」然後，通過幾個單選按鈕，他們可以選擇他們想要的類型，「多選」，「選擇最佳」或「簡答題」。從這一點出發，更多的表單出現......換句話說，取決於他們想要問哪種類型的問題，要求他們在向服務器提交他們想問的問題之前填寫不同的標準。這有意義嗎？這裏是我的形式至今：使用JavaScript動態下拉表單

<!DOCTYPE html> 
    <html> 
     <head> 
      <title>Quick Bump</title> 
      <link href="styles.css" type="text/css" rel="stylesheet" /> 
     </head> 

     <body> 
      <div class="center"> 

      <h1 class="welcomeHeader">Create a Question:</h1> 
      <form action="http://www.example.com/profile.php"> 

      <p class="pStyle">Please select what type of Question you'd like to ask: 
       <br /> 
       <br /> 
       <input type="radio" name="genre" value="Multiple Choice" checked="checked" /> Multiple Choice 
       <input type="radio" name="genre" value="Select the Best" /> Select the Best 
       <input type="radio" name="genre" value="Short Answer" /> Short Answer 
      </p> 
      <br /> 

      <p class="pStyle">What is your Question? 
       <br /> 
       <br /> 
       <label>Q:<input type="text" class="resizedTextBox" name="Question" /></label><br /> 
      </p> 
      <br /> 

      <p class="pStyle">What are the answers available? 
       <br /> 
       <br /> 
       <label>A:<input type="text" class="resizedTextBox" name="Answer 1" /></label><br /> 
       <label>B:<input type="text" class="resizedTextBox" name="Answer 2" /></label><br /> 
       <label>C:<input type="text" class="resizedTextBox" name="Answer 3" /></label><br /> 
       <label>D:<input type="text" class="resizedTextBox" name="Answer 4" /></label><br /> 
      </p> 
      <br /> 

      <p class="pStyle">Would you like to submit this question now?</p> 
      <input type="submit" class="submitLink" name="submit form" value="Submit" /> 
     </form> 
    </div> 
    <br /> 
    <div class="footer"> 
     <a href="firstWebPage.html" class="links">Home</a> 
    </div> 
</body>

來源

2013-04-04 Stu

您可以使用jQuery逐步顯示每個連續的一段作爲前面的表單元素被改變。

下面是一個例子，希望能夠讓你開始： http://jsfiddle.net/kevincollins/uarZb/

$(function() { 
    $('.pStyle:first').show(); 
    $('input[name="genre"]').change(function(){ 
     $('.pStyle:eq(1)').show(); 
    }); 
    $('input[name="Question"]').change(function(){ 
     $('.pStyle:eq(2)').show(); 
    }); 
    $('input[name^="Answer"]').change(function(){ 
     $('.pStyle:eq(3)').show(); 
    }); 
});

來源

2013-04-05 00:01:24

哇，這似乎是有道理的。如果我有任何問題，我將與此合作並更新您，但認真，謝謝！ – Stu 2013-04-05 00:06:02

哦，其實我有一個。那麼我應該爲這段代碼創建一個單獨的文件，還是應該將它放在創建問題文件中？ – Stu 2013-04-05 00:10:32

無論哪種方式都行得通，但將腳本放入單獨文件通常是更好的做法。 – 2013-04-05 02:32:27

使用JavaScript動態下拉表單

回答

相關問題