2014-03-30 127 views
0

我有一個選擇字段。當用戶從字段中選擇選項時,我想根據用戶選擇顯示輸出。例如,如果用戶選擇2,那麼我想兩次顯示'hello world'。這是我迄今爲止所做的。jquery函數不工作?

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 

<p>Select Option:<select id="noAct"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option 
    </select> 


<p id="tables"></p> 

<script> 
    function displayTable() 
    { 
     var value = $("#noAct").val(); 

     //for loop to display the no of tables required 
     for (var i=0; i<value; i++) 
     { 
      //display the table 
      $("#tables").html("<b>Hello World</b>"); 

     } 
    } 

    $("select").change(displayTable); 
    displayTable(); 
</script> 

我沒有輸出或任何。有人能幫我嗎?

+0

如何把'change'和'displayTable()'放在一個DOM準備好的處理程序中? – karthikr

+0

語法錯誤,缺少'noAct' ID上的引號,未封閉的選項標籤等 – adeneo

+0

我是jquery的新手,所以如果你可以驢評我的解決方案將會很棒 – Crestamr

回答

2

修正語法錯誤,並在循環使用append(),不html()因爲它覆蓋在每次迭代

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 

<p>Select Option:</p> 
<select id="noAct"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 


<p id="tables"></p> 

<script> 
    function displayTable() { 
     var value = $("#noAct").val(); 

     $("#tables").empty(); 

     for (var i=0; i < value; i++) { 
      $("#tables").append("<b>Hello World</b><br />"); 
     } 
    } 

    $("select").change(displayTable); 
    displayTable(); 
</script> 

FIDDLE

+0

+1比我快: ) –

0

嘗試像下面,

$(document).ready(function() { 

    $("select").change(displayTable); 

}); 
+0

仍然無法使用! – Crestamr

+0

$(document).ready('是不必要的,你調用displayTable()並將返回值('undefined')傳遞給'change'而不是函數。 – Paulpro

0

嘗試內容這個:

<script> 

$(document).ready(function(){ 
    $("#noAct").on('change', function(){ 
     var value = $(this).val(); 

     //for loop to display the no of tables required 
     $("#tables").html(); 
     for (var i=0; i<value; i++) 
     { 
      //display the table 
      $("#tables").append("<b>Hello World</b><br />"); 

     } 
    }); 
}); 
</script>