更改選擇選項，將導致不同的形式

-1

所以，我有一個基於用戶類型的下拉列表。我想要的是當用戶點擊不同類型的用戶時，它會顯示不同。更改選擇選項，將導致不同的形式

<label for="user_type">Login Type:</label></td> 
        <td width="271"><select name="usertype" onChange=""> 
         <option value="public">Public</option> 
         <option value="student"> Student</option 
        </select>

當公共用戶點擊，就會出現像在學生這個

<p>Username 
    <label for="username"></label> 
<input type="text" name="username" id="username"> 
    </p> 
    <p>Password 
    <label for="password"></label> 
    <input type="password" name="password" id="password"> 
    </p>

而當用戶點擊一個形式，它會出現這樣的

<p>Student ID 
    <label for="student_id"></label> 
<input type="text" name="student_id" id="student_id"> 
    </p> 
    <p>Password 
    <label for="password"></label> 
    <input type="password" name="password" id="password"> 
    </p>

感謝的形式。

來源

2014-10-20 Amirul Azmi

這裏沒有問題...你只需提供一個作業規範，並希望別人爲你做它。這不是這裏的事情。您有義務嘗試自己解決問題，並在實際代碼出現問題時提供幫助 – charlietfl 2014-10-20 03:21:49

我建議你自己買一本關於DOM和JavaScript的書，因爲這是一個非常基本的例子。隨着中說，你可以完成，像這樣：

$('#toggler').change(function() { 
 
    if ($('#toggler').val() === 'public') { 
 
    $('#public').show(); 
 
    $('#student').hide(); 
 
    } else { 
 
    $('#public').hide(); 
 
    $('#student').show(); 
 
    } 
 
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="usertype" id="toggler"> 
 
    <option value="public">Public</option> 
 
    <option value="student">Student</option> 
 
</select> 
 

 

 
    <div id="public"> 
 
    <h2>Public</h2> 
 
    <p>Username 
 
     <label for="username"></label> 
 
     <input type="text" name="username" id="username"> 
 
    </p> 
 
    <p>Password 
 
     <label for="password"></label> 
 
     <input type="password" name="password" id="password"> 
 
    </p> 
 
    </div> 
 

 

 
    <div id="student"> 
 
    <h2>Student</h2> 
 
    <p>Student ID 
 
     <label for="student_id"></label> 
 
     <input type="text" name="student_id" id="student_id"> 
 
    </p> 
 
    <p>Password 
 
     <label for="password"></label> 
 
     <input type="password" name="password" id="password"> 
 
    </p> 
 
    </div>

來源

2014-10-20 03:15:48 qwertymk

編輯HTML像這樣（加平變化）：

  <label for="user_type">Login Type:</label></td> 
      <td width="271"><select name="usertype" onChange="apply(this);"> 
       <option value="public">Public</option> 
       <option value="student"> Student</option 
      </select>

的JavaScript：

function apply(select) { 
    var publicForm = '<p>Username <label for="username"></label><input type="text" name="username" id="username"></p><p>Password <label for="password"></label><input type="password" name="password" id="password"></p>'; 
    var studentForm = '<p>Student ID<label for="student_id"></label><input type="text" name="student_id" id="student_id"></p><p>Password <label for="password"></label><input type="password" name="password" id="password"></p>'; 
    var toAdd = ''; 

    switch ($(select).val()) { 
    case 'public': 
     toAdd = publicForm; 
     break; 
    case 'student': 
     toAdd = studentForm; 
     break; 
    } 
    $(select).parent().append(toAdd); 
}

或者你可以創建一個塊，並設置display: none他們，然後就顯示出來。

來源

2014-10-20 03:13:57 Efog

更改選擇選項，將導致不同的形式

回答

相關問題