创建jQuery元素不在jQuery风格

Question

我是所有JavaScript和jQuery-Stuff的新手。请原谅我的编码或我肮脏的风格的任何愚蠢的错误。我很高兴您的经验丰富的一方提供所有建设性的反馈意见。

我尝试动态添加一些jQuery元素，就像一些新的选择菜单一样。在我的例子中，用户应该决定他想要定制的车辆数量，并基于此我想为每辆选定的车辆创建一个新的选择菜单。

我得到它的工作，如果用户选择“2车”jQuery将添加两个新的选择菜单。但我的问题是，这些菜单不再在jQuery-Style中。

我在这里做错了什么？根据汽车的选择数量，是否可以在“for-loop”中添加新的菜单？

这里是我的代码：

<script type="text/javascript"> 

    $('#select-choice-1').live("change", function(event, ui) { 
     var valuee = $(this).val(); 

     if (valuee == '2') ($('<label for="select-choice-2" class="select">Color of car #1</label>' + 
              '<select name="select-choice-2" id="select-choice-2">'+ 
              '<option value="red">red</option>'+ 
              '<option value="blue">blue</option>'+ 
              '</select><br><br>' + 
           '<label for="select-choice-3" class="select">Color of car #2</label>' + 
              '<select name="select-choice-3" id="select-choice-3">'+ 
              '<option value="green">green</option>'+ 
              '<option value="yellow">yellow</option>'+ 
              '</select>').appendTo('#site')); 
     if (valuee == '3') ($('<h1>Test</h1>').appendTo('#site')); 

    }); 
    </script> 

这里是html页面：

<div id="site" data-role="fieldcontain">  

    <label for="select-choice-1" class="select">Number of cars</label> 
    <select name="select-choice-1" id="select-choice-1"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 


    </div><!-- "site" --> 

Answer 1

 $('#site').delegate("#select-choice-1", "change", function(event, ui) { 
      var valuee = $(this).val(); 
      var constructhtml = ''; 
      if (valuee == '2') { 
       constructhtml +='<label for="select-choice-2" class="select">Color of car #1</label>' + '<select name="select-choice-2" id="select-choice-2">'+ '<option value="red">red</option>'+ '<option value="blue">blue</option>'+ '</select><br><br>' + '<label for="select-choice-3" class="select">Color of car #2</label>' + '<select name="select-choice-3" id="select-choice-3">'+ '<option value="green">green</option>'+ '<option value="yellow">yellow</option>'+ '</select>'; 
      }else if (valuee == '3') { 
       constructhtml +='<h1>Test</h1>'; 
      } 
    $('#site').append(constructhtml); 
    }); 

OP的需要创建一个动态添加选择菜单

将这个档位已到thwe页面最下方

<div id="selectcontainer"></div> 

$(document).ready(function(){ 

var str = ''; 
str+='<select>'; 
    for(i=1;i<=10;i++){ 
    str+='<option value='"+i+"'>'"+i+"'</option>'; 

    } 
str+='</select>'; 
$('#selectcontainer').html(str); 
});