2013-10-10 47 views
0

下面的代碼工作正常,但需要一些改進像我想追加和取消對選擇框的值添加一個div不做工精細

檢查該網站的每一個改變的選擇的人DIV http://www.travelnow.com/1http://www.travelnow.com/ 房間選擇選項功能 enter image description here

我的HTML代碼

<select id="roomOptions"> 
    <option value="1" selected="selected"> 1 </option> 
    <option value="2"> 2 </option> 
    <option value="3"> 3 </option> 
</select> 
<br/> 
<div id="text"> 
    <label> Adults (18+) </label> 
    <label> Children (0-17) </label> 
</div> 
<div class="select-person"> 
    <label> Adults (18+) </label> 
    <select> 
    <option value="1"> 1 </option> 
    <option value="2" selected="selected"> 2 </option> 
    </select> 
    <label> Children (0-17) </label> 
    <select> 
    <option value="0" selected="selected"> 0 </option> 
    <option value="1"> 1 </option> 
    <option value="2"> 2 </option> 
    </select> 
</div> 

MY SCRIP牛逼

$('select#roomOptions').change(function() { 
    $('div#text select').remove(); 
    var val = $(this).val();  
    for (var x = 1; x < val; x++) { 
     var createSelectBox = '<select id="adults"><option value="1">1</option></select><option value="2">2</option></select><option value="3">3</option></select><select id="children"><option value="1">1</option></select><option value="2">2</option></select><option value="3">3</option></select>'; 
    $('div#text').append(createSelectBox); 
    } 
}); 

回答

0

找到一個解決方案不知道它的正確的和安全的方式或不...

HTML

<div> 
<label>Select Rooms</label> 
<select id="txtTickets"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
    <option value="5">Five</option> 
</select> 
</div> 
<div style="width:200px; float:left"> 
<div style="width:100px; float:left;"> 
<label>Adult</label><br> 
<select> 
<option>one</option> 
<option>two</option> 
<option>three</option> 
</select> 
</div> 
<div style="float:left; width:100px"> 
<label>Children</label><br> 
<select> 
<option>one</option> 
<option>two</option> 
<option>three</option> 
</select> 
</div> 
</div> 
<div style="clear:both"></div> 
<div id="selectContainer"></div> 

腳本

$('#txtTickets').change(function() { 
     var val = parseInt($(this).val(), 10); 
     var html = ''; 
     for (var i = 1; i < val; i++) { 
      html += '<select class="adults"><option>One</option><option>Two</option></select><select class="childs"><option>One</option><option>Two</option></select><br>'; 
     } 
     $('#selectContainer').html(html); 
}); 
相關問題