動態生成一個HTML格式的新下拉菜單

我有一個HTML格式定義。我有一個按鈕供用戶選擇他的職業。如果他的職業恰好是一名學生，那麼我需要動態生成另一個新按鈕。如果用戶選擇除了學生以外的任何東西，那麼我不想要任何新的按鈕。我不確定該怎麼做。我使用jQuery嗎？我不知道使用jQuery。有人可以幫忙嗎？任何指針動態生成一個HTML格式的新下拉菜單

謝謝。

<?php 

?> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function() 
{ 
    $('#occupation').change(function() 
    { 
     if($(this).val() == 'Student') 
     { 
      $('#school').show(); 
     } else { 
      $('#school').hide(); 
     } 
    }); 
}); 


</script> 

<html> 
<body> 

<h1>My First Heading</h1> 

<p>My first paragraph.</p> 


<form> 

<select name="occupation" id="occupation"> 
    <option value="">- Select Occupation -</option> 
    <option value="Worker">Worker</option> 
    <option value="Student">Student</option> 
</select> 
<select name="school" id="school" style="display: none;"> 
    <option value="">Select School Type</option> 
    <option value="4 Year">4 Year</option> 
    <option value="2 Year">2 Year</option> 
</select> 


</form> 

</body> 
</html>

來源

2012-10-11 rockstar

所以我寫了這個樣本測試程序完全我被問到的方式，但它不起作用。新的div領域即學校沒有開始顯示，當我從下拉菜單中選擇學生..不能看到問題。一旦我在這裏工作，然後我會嘗試把它放在我的代碼中。最受讚賞的任何幫助。 – rockstar

好吧，我運行了。如果（$（this）.val（）返回一個索引而不是一個字符串，那麼正確的比較應該是if（$（this）.val（）==「0」）如果下拉列表中的0對應於學生 – rockstar

就我個人而言，我通過將額外的表單元素放入HTML ，只是隱蔽起來像這樣：

<select name="occupation" id="occupation"> 
    <option value="">- Select Occupation -</option> 
    <option value="Worker">Worker</option> 
    <option value="Student">Student</option> 
</select> 
<select name="school" id="school" style="display: none;"> 
    <option value="">Select School Type</option> 
    <option value="4 Year">4 Year</option> 
    <option value="2 Year">2 Year</option> 
</select>

然後你可以使用JS，因爲我比較喜歡jQuery的，以顯示格或隱藏div時適用：

$(document).ready(function() 
{ 
    $('#occupation').change(function() 
    { 
     if($(this).val() == 'Student') 
     { 
      $('#school').show(); 
     } else { 
      $('#school').hide(); 
     } 
    }); 
});

來源

2012-10-11 15:52:31 Jason

你的代碼很有意義但是我認爲我犯了一些錯誤 – rockstar

你的代碼肯定對我很有意義但是我無法讓它運行我對JS調試非常不熟悉，。發生的事情是，當我從職業領域選擇「學生」時，學校div元素不會顯示，而是我給學校div元素的標題只有在點擊「保存」按鈕後纔會顯示這個頁面..嗯，我想動態更新，只要''學生''在框中選擇 – rockstar

好吧，所以我得到它運行$（this）.val（）返回一個索引，而不是一個字符串。如果下拉列表中的0對應於Student，比較應該是if（$（this）.val（）==「0」）。它工作 – rockstar

使用jQuery將簡化這樣的：

比方說，你具備以下條件：

：

<form> 

    <select name="occupation"> 
     <option value="Non-Student">Non-Student</option> 
     <option value="Student">Student</option> 
    </select> 

</form>

然後將用於追加按鈕，如果用戶選擇「學生」以下

$(function(){ 
    $('select[name="occupation"]').change(function(){ 
     var val = $(this).val(); 
     if(val=='Student'){ 
     $('form').append('<button>New Button</button>'); 
     } 
    }); 
});

來源

2012-10-11 15:51:10 Fluidbyte

動態生成一個HTML格式的新下拉菜單

回答

相關問題