Javascript funktioniert nicht mehr, wenn ich ein anderes Snippet innerhalb

Question

anpasse Ich hatte ein jquery Schnipsel arbeiten, aber die Minute, die ich einen anderen Javascript-Code im vorhandenen Skript hinzufügen, das JS funktioniert nicht mehr. Der Code, den ich hinzugefügt ist derjenige unten, die in this snippet funktioniert:

$("ul").on("click", ".init", function() { 
    $(this).closest("ul").children('li:not(.init)').toggle(); 
}); 

var allOptions = $("ul").children('li:not(.init)'); 
$("ul").on("click", "li:not(.init)", function() { 
    allOptions.removeClass('selected'); 
    $(this).addClass('selected'); 
    $("ul").children('.init').html($(this).html()); 
    allOptions.toggle(); 
    console.log($('.selected .value').text()); 
}); 

Das Snippet an dem ich arbeite ist this

Hier ist mein HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" 
     type="text/javascript"></script> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" 
     rel="Stylesheet" type="text/css" /> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 

<ul class="list-unstyled" style="list-style: none;"> 
    <li class="init">--SELECT--</li> 
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li> 
    <li data-value="value 3"><span class="value">Durban</span><span class="numbers">1400</span></li> 
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li> 
</ul> 

<div class="date-example-container">    
      <div class="selection"> 
       <div class="label"> 
        <label>Waarheen gaan jy?</label>  
        <select id="selection">         
         <option value="">Naam van Blyplek</option>     
         <option value="karoo">Karoo</option>      
         <option value="knysna">Knysna</option>     
         <option value="durban">Durban</option>     
         <option value="pretoria">Pretoria</option>     
         <option value="kaapstad">Kaapstad</option>     
         <option value="tuinroete">Tuinroete</option>     
        </select> 
       </div>    

       <div class="icon" tabindex="0">     
        <div>      
         <i class="fa fa-search" aria-hidden="true"></i>     
        </div>    
       </div>   
      </div>     
      <div class="from-to">   
       <div class="from"> 
        <div class="label"> 
         <label>Vanaf</label> 
         <input placeholder="Inklok" type="text" id="txtFrom" /> 
        </div>          
        <i class="fa fa-calendar-o" aria-hidden="true"></i>   
       </div>   
       <div class="to"> 
        <div class="label"> 
         <label>Tot</label>  
         <input placeholder="Uitklok" type="text" id="txtTo" /> 
        </div>     
        <i class="fa fa-calendar-o" aria-hidden="true"></i>   
       </div>  
      </div>   
      <div class="field right"> 

       <div class="label"> 
        <label>Aantal gaste</label>    
        <select id="search-pax" name="pax" class="ls-select "> 
         <option value="1">1 gas</option> 
         <p>Vim aqui pra vadiar</p> 
         <option value="2">2 gaste</option>     
         <option value="3">3 gaste</option>     
         <option value="4">4 gaste</option>     
         <option value="5">5 gaste</option>     
         <option value="6">6 gaste</option>     
         <option value="7">7 gaste</option>     
         <option value="8">8 gaste</option>     
         <option value="9">9 gaste</option>     
         <option value="10">10 gaste</option>     
         <option value="11">11 gaste</option>     
         <option value="12">12 gaste</option>     
         <option value="13">13 gaste</option>     
         <option value="14">14 gaste</option>     
         <option value="15">15 gaste</option>     
         <option value="16">16 gaste</option>     
         <option value="17">17 gaste</option>     
         <option value="18">18 gaste</option>     
         <option value="19">19 gaste</option>     
         <option value="20">20 gaste</option>     
        </select> 
       </div>   
       <div class="icon" tabindex="0"> 
        <div> 
         <i class="fa fa-user" aria-hidden="true"></i> 
        </div> 
       </div>   
      </div>   
      <a id="atributo"href="#" target="_blank">SOEK AKKOMMODASIE</a>  
     </div> 

CSS:

body{ 
    padding:30px; 
} 
ul { 
    height: 30px; 
    width: 150px; 
    border: 1px #000 solid; 
} 
ul li { padding: 5px 10px; z-index: 2; } 
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } 
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } 
li.init { cursor: pointer; } 

a#submit { z-index: 1; } 

li{ 
    display: flex; 
    justify-content: space-between; 

} 
li, ul{ 
    padding: 0; 
    margin: 0; 
} 


body{ 
    padding:30px; 
} 
ul { 
    height: 30px; 
    width: 150px; 
    border: 1px #000 solid; 
} 
ul li { padding: 5px 10px; z-index: 2; } 
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } 
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } 
li.init { cursor: pointer; } 

a#submit { z-index: 1; } 

li{ 
    display: flex; 
    justify-content: space-between; 

} 
li, ul{ 
    padding: 0; 
    margin: 0; 
} 

#column{ 
    position: relative; 
} 
li{ 
    list-style: none; 
    justify-content: space-between; 
    display: flex; 
} 
li:hover{ 
    background: black; 
    color: white; 

} 
.date-example-container i.fa { 
    color: #555; 
} 

.date-example-container { 
    width: 100%; 
    max-width: 350px; 
    margin: 20px 0; 
    color: #9999a2; 
    clear: both; 
} 

.date-example-container label{color: #555555;} 


input#txtTo, 
input#txtFrom{ 
    position: relative; 
    padding: 10px; 
} 

input#txtFrom:after{ 
    font-family: fontawesome; 
    content: '\f073'; 
    psotion: absolute; 
} 

.fa-calendar-o{ 
    position: absolute; 
    right: 0; 
    top: 26px; 
    padding: 10px; 
} 
.submit-here{ 
    display: inline-block; 
    background: #ee782e; 
    border: 0; 
    color: white; 
    padding:10px; 
    margin-top: 10px; 
} 

select{ 
    width: 100%; 
    padding: 10px; 
    -webkit-appearance: none; 
} 

.date-example-container .field.right { 
    position: relative; 
    float: none; 
} 

.icon { 
    width: 33px; 
    height: 40px; 
    position: absolute; 
    right: 0; 
    color: #000; 
    font-size: 18pt; 
} 

.from-to i { 
    font-size: 18pt; 
} 

.selection{ 
    position: relative; 
} 

.date-example-container .field.right .icon { 
    top: 36px; 
} 

.selection .icon { 
    top: 34px; 
} 

.from-to .icon{ 
    right: 3px; 
    top: 26px; 
} 

input#txtTo, input#txtFrom { 
    position: relative; 
    padding: 10px; 
    width: 100%; 
    max-width: 130px; 
} 

.date-example-container input{ 
    width: 100%; 
    /*display: block; 
*/} 

.date-example-container label { 
    display: block; 
} 

.from-to { 
    display: flex; 
    padding: 10px 0; 
    justify-content: space-between; 
} 

.from, .to { 
    position: relative; 
} 

a#atributo { 
    display: block; 
    background: #ee782e; 
    border: 0; 
    color: white; 
    padding: 10px; 
    margin-top: 10px; 
    text-decoration: none; 
    text-align: center; 
    text-transform: uppercase; 

} 

td.ui-datepicker-unselectable.ui-state-disabled { 
    background: white; 
    color: #ebebeb; 
} 

table.ui-datepicker-calendar td { 
    border: 0; 
    background: #DADADA; 
    color: black; 
} 

a.ui-state-default { 
    color: #555; 
} 

.ui-datepicker-title > span { 
    border-bottom: 1px solid; 
} 

.ui-datepicker-calendar th { 
    background: transparent !important; 
    border: 0 !important; 
    color: #999 !important; 
    font-weight: bold !important; 
} 

input#txtTo:active, 
input#txtFrom:active, 
select#search-pax:active, 
input#txtTo:hover, 
input#txtFrom:hover, 
select#search-pax:hover, 
select#selection:hover, 
select#selection:active { 
    border-color: #EE782E; 
    font-style: normal; 
    outline: 0 !important; 
} 
.ui-datepicker .ui-datepicker-header .ui-datepicker-next, 
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev{ 
    background: none; 
} 

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after, 
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before{ 
    font-family: fontawesome; 
    color: #999; 
} 

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before { 
    content: '\f0d9 '; 
} 

.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after{ 
    content: '\f0da'; 
} 

body{ 
    padding:30px; 
} 
ul { 
    height: 30px; 
    width: 150px; 
    border: 1px #000 solid; 
} 
ul li { padding: 5px 10px; z-index: 2; } 
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } 
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } 
li.init { cursor: pointer; } 

a#submit { z-index: 1; } 

li{ 
    display: flex; 
    justify-content: space-between; 

} 
li, ul{ 
    padding: 0; 
    margin: 0; 
} 

body{ 
    padding:30px; 
} 
ul { 
    height: 30px; 
    width: 150px; 
    /*border: 1px #000 solid;*/ 
} 
ul li { padding: 5px 10px; z-index: 2; } 
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } 
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } 
li.init { cursor: pointer; } 

a#submit { z-index: 1; } 

li{ 
    display: flex; 
    justify-content: space-between; 

} 
li, ul{ 
    padding: 0; 
    margin: 0; 
} 

JS:

jQuery(document).ready(function($){ 

    $("ul").on("click", ".init", function() { 
     $(this).closest("ul").children('li:not(.init)').toggle(); 
    }); 

    var allOptions = $("ul").children('li:not(.init)'); 
    $("ul").on("click", "li:not(.init)", function() { 
    allOptions.removeClass('selected'); 
    $(this).addClass('selected'); 
    $("ul").children('.init').html($(this).html()); 
    allOptions.toggle(); 
    console.log($('.selected .value').text()); 
    }); 


    var txtFromDate, txtToDate; 
    $("#txtFrom").datepicker({ 
    dateFormat: "d/M/yy", 
    numberOfMonths: 1, 
    onSelect: function(selected) { 
     txtFromDate = selected; 
     var dt = new Date(selected); 
     dt.setDate(dt.getDate() + 1); 
     $("#txtTo").datepicker("option", "minDate", dt); 
    } 
    }); 
    $("#txtTo").datepicker({ 
    numberOfMonths: 1, 
    onSelect: function(selected) { 
     txtToDate = selected; 
     var dt = new Date(selected); 
     dt.setDate(dt.getDate() - 1); 
     $("#txtFrom").datepicker("option", "maxDate", dt); 
    } 
    }); 

    $('a#atributo').click(function() { 
    // var link = day_1+month_1+year; 
    var monthNames = [ 
     "Jan", "Feb", "Mar", 
     "Apr", "May", "Jun", "Jul", 
     "Aug", "Sep", "Oct", 
     "Nov", "Dec" 
     ]; 

    var date1 = $("#txtFrom").datepicker('getDate'), 
     day_1 = date1.getDate(), 
     month_1 = date1.getMonth() + 1,    
     year_1 = date1.getFullYear(); 

    var date2 = $("#txtTo").datepicker('getDate'), 
     day_2 = date2.getDate(), 
     month_2 = date2.getMonth() + 1,    
     year_2 = date2.getFullYear(); 


    var people = $('#search-pax :selected').val(); 

    $(this).attr("href", "http://www.lekkeslaap.co.za/akkommodasie-in/"+where+"?q="+where+"&start="+day_1+"+"+monthNames[month_1]+"+"+year_1+'&end='+day_2+'+'+monthNames[month_2]+'+'+year_2+'&pax='+people); 
    }); 
}); 

Wie kann ich das Drop-down und die Kalender arbeiten lassen?

Answer 1

jQuery.on Methode wurde in der Version 1.7 und Sie haben 1.6 hinzugefügt (Sie es mit bind ersetzen können, oder Sie können die Version von jQuery-Bibliothek aktualisieren)

einen Blick auf die folgenden Code-Schnipsel

jQuery(document).ready(function(){ 
 

 
    $("ul").on("click", ".init", function() { 
 
     $(this).closest("ul").children('li:not(.init)').toggle(); 
 
    }); 
 

 
    var allOptions = $("ul").children('li:not(.init)'); 
 
    $("ul").on("click", "li:not(.init)", function() { 
 
    allOptions.removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    $("ul").children('.init').html($(this).html()); 
 
    allOptions.toggle(); 
 
    console.log($('.selected .value').text()); 
 
    }); 
 

 
     
 
\t var txtFromDate, txtToDate; 
 
    $("#txtFrom").datepicker({ 
 
    dateFormat: "d/M/yy", 
 
    numberOfMonths: 1, 
 
    onSelect: function(selected) { 
 
     txtFromDate = selected; 
 
     var dt = new Date(selected); 
 
     dt.setDate(dt.getDate() + 1); 
 
     $("#txtTo").datepicker("option", "minDate", dt); 
 
    } 
 
    }); 
 
    $("#txtTo").datepicker({ 
 
    numberOfMonths: 1, 
 
    onSelect: function(selected) { 
 
     txtToDate = selected; 
 
     var dt = new Date(selected); 
 
     dt.setDate(dt.getDate() - 1); 
 
     $("#txtFrom").datepicker("option", "maxDate", dt); 
 
    } 
 
    }); 
 

 
    $('a#atributo').click(function() { 
 
    // var link = day_1+month_1+year; 
 
\t var monthNames = [ 
 
\t \t "Jan", "Feb", "Mar", 
 
\t \t "Apr", "May", "Jun", "Jul", 
 
\t \t "Aug", "Sep", "Oct", 
 
\t \t "Nov", "Dec" 
 
\t ]; 
 

 
    var date1 = $("#txtFrom").datepicker('getDate'), 
 
     day_1 = date1.getDate(), 
 
     month_1 = date1.getMonth() + 1,    
 
     year_1 = date1.getFullYear(); 
 
      
 
    var date2 = $("#txtTo").datepicker('getDate'), 
 
     day_2 = date2.getDate(), 
 
     month_2 = date2.getMonth() + 1,    
 
     year_2 = date2.getFullYear(); 
 
    
 
    
 
    var people = $('#search-pax :selected').val(); 
 
    
 
    $(this).attr("href", "http://www.lekkeslaap.co.za/akkommodasie-in/"+where+"?q="+where+"&start="+day_1+"+"+monthNames[month_1]+"+"+year_1+'&end='+day_2+'+'+monthNames[month_2]+'+'+year_2+'&pax='+people); 
 
    }); 
 
});

body{ 
 
    padding:30px; 
 
} 
 
ul { 
 
    height: 30px; 
 
    width: 150px; 
 
    border: 1px #000 solid; 
 
} 
 
ul li { padding: 5px 10px; z-index: 2; } 
 
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } 
 
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } 
 
li.init { cursor: pointer; } 
 

 
a#submit { z-index: 1; } 
 

 
li{ 
 
    display: flex; 
 
    justify-content: space-between; 
 

 
} 
 
li, ul{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 

 
body{ 
 
    padding:30px; 
 
} 
 
ul { 
 
    height: 30px; 
 
    width: 150px; 
 
    border: 1px #000 solid; 
 
} 
 
ul li { padding: 5px 10px; z-index: 2; } 
 
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } 
 
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } 
 
li.init { cursor: pointer; } 
 

 
a#submit { z-index: 1; } 
 

 
li{ 
 
    display: flex; 
 
    justify-content: space-between; 
 
    
 
} 
 
li, ul{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#column{ 
 
    position: relative; 
 
} 
 
li{ 
 
    list-style: none; 
 
    justify-content: space-between; 
 
    display: flex; 
 
} 
 
li:hover{ 
 
    background: black; 
 
    color: white; 
 

 
} 
 
.date-example-container i.fa { 
 
    color: #555; 
 
} 
 

 
.date-example-container { 
 
    width: 100%; 
 
    max-width: 350px; 
 
    margin: 20px 0; 
 
\t color: #9999a2; 
 
\t clear: both; 
 
} 
 

 
.date-example-container label{color: #555555;} 
 

 

 
input#txtTo, 
 
input#txtFrom{ 
 
    position: relative; 
 
    padding: 10px; 
 
} 
 

 
input#txtFrom:after{ 
 
    font-family: fontawesome; 
 
    content: '\f073'; 
 
    psotion: absolute; 
 
} 
 

 
.fa-calendar-o{ 
 
    position: absolute; 
 
    right: 0; 
 
    top: 26px; 
 
    padding: 10px; 
 
} 
 
.submit-here{ 
 
    display: inline-block; 
 
    background: #ee782e; 
 
    border: 0; 
 
    color: white; 
 
    padding:10px; 
 
    margin-top: 10px; 
 
} 
 

 
select{ 
 
    width: 100%; 
 
    padding: 10px; 
 
    -webkit-appearance: none; 
 
} 
 

 
.date-example-container .field.right { 
 
    position: relative; 
 
\t float: none; 
 
} 
 

 
.icon { 
 
    width: 33px; 
 
    height: 40px; 
 
    position: absolute; 
 
    right: 0; 
 
    color: #000; 
 
\t font-size: 18pt; 
 
} 
 

 
.from-to i { 
 
    font-size: 18pt; 
 
} 
 

 
.selection{ 
 
    position: relative; 
 
} 
 

 
.date-example-container .field.right .icon { 
 
\t top: 36px; 
 
} 
 

 
.selection .icon { 
 
    top: 34px; 
 
} 
 

 
.from-to .icon{ 
 
\t right: 3px; 
 
\t top: 26px; 
 
} 
 

 
input#txtTo, input#txtFrom { 
 
    position: relative; 
 
    padding: 10px; 
 
    width: 100%; 
 
    max-width: 130px; 
 
} 
 

 
.date-example-container input{ 
 
\t width: 100%; 
 
\t /*display: block; 
 
*/} 
 

 
.date-example-container label { 
 
    display: block; 
 
} 
 

 
.from-to { 
 
    display: flex; 
 
    padding: 10px 0; 
 
    justify-content: space-between; 
 
} 
 

 
.from, .to { 
 
    position: relative; 
 
} 
 

 
a#atributo { 
 
    display: block; 
 
    background: #ee782e; 
 
    border: 0; 
 
    color: white; 
 
    padding: 10px; 
 
    margin-top: 10px; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    
 
} 
 

 
td.ui-datepicker-unselectable.ui-state-disabled { 
 
    background: white; 
 
    color: #ebebeb; 
 
} 
 

 
table.ui-datepicker-calendar td { 
 
    border: 0; 
 
    background: #DADADA; 
 
    color: black; 
 
} 
 

 
a.ui-state-default { 
 
    color: #555; 
 
} 
 

 
.ui-datepicker-title > span { 
 
    border-bottom: 1px solid; 
 
} 
 

 
.ui-datepicker-calendar th { 
 
    background: transparent !important; 
 
    border: 0 !important; 
 
    color: #999 !important; 
 
    font-weight: bold !important; 
 
} 
 

 
input#txtTo:active, 
 
input#txtFrom:active, 
 
select#search-pax:active, 
 
input#txtTo:hover, 
 
input#txtFrom:hover, 
 
select#search-pax:hover, 
 
select#selection:hover, 
 
select#selection:active { 
 
    border-color: #EE782E; 
 
    font-style: normal; 
 
    outline: 0 !important; 
 
} 
 
.ui-datepicker .ui-datepicker-header .ui-datepicker-next, 
 
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev{ 
 
\t background: none; 
 
} 
 

 
.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after, 
 
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before{ 
 
\t font-family: fontawesome; 
 
\t color: #999; 
 
} 
 

 
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before { 
 
\t content: '\f0d9 '; 
 
} 
 

 
.ui-datepicker .ui-datepicker-header .ui-datepicker-next:after{ \t 
 
\t content: '\f0da'; 
 
} 
 

 
body{ 
 
    padding:30px; 
 
} 
 
ul { 
 
    height: 30px; 
 
    width: 150px; 
 
    border: 1px #000 solid; 
 
} 
 
ul li { padding: 5px 10px; z-index: 2; } 
 
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } 
 
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } 
 
li.init { cursor: pointer; } 
 

 
a#submit { z-index: 1; } 
 

 
li{ 
 
    display: flex; 
 
    justify-content: space-between; 
 

 
} 
 
li, ul{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
body{ 
 
    padding:30px; 
 
} 
 
ul { 
 
    height: 30px; 
 
    width: 150px; 
 
    /*border: 1px #000 solid;*/ 
 
} 
 
ul li { padding: 5px 10px; z-index: 2; } 
 
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } 
 
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } 
 
li.init { cursor: pointer; } 
 

 
a#submit { z-index: 1; } 
 

 
li{ 
 
    display: flex; 
 
    justify-content: space-between; 
 

 
} 
 
li, ul{ 
 
    padding: 0; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" 
 
     type="text/javascript"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css" 
 
     rel="Stylesheet" type="text/css" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
 

 
<ul class="list-unstyled" style="list-style: none;"> 
 
    <li class="init">--SELECT--</li> 
 
    <li data-value="value 2"><span class="value">Durban</span><span class="numbers">1700</span></li> 
 
    <li data-value="value 3"><span class="value">Durban</span><span class="numbers">1400</span></li> 
 
    <li data-value="value 4"><span class="value">Durban</span><span class="numbers">1200</span></li> 
 
</ul> 
 

 
<div class="date-example-container"> \t \t \t 
 
\t \t \t <div class="selection"> 
 
\t \t \t \t <div class="label"> 
 
\t \t \t \t \t <label>Waarheen gaan jy?</label> \t 
 
\t \t \t \t \t <select id="selection"> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="">Naam van Blyplek</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="karoo">Karoo</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="knysna">Knysna</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="durban">Durban</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="pretoria">Pretoria</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="kaapstad">Kaapstad</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="tuinroete">Tuinroete</option> \t \t \t \t 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t \t \t \t \t 
 
\t \t \t \t <div class="icon" tabindex="0"> \t \t \t \t \t 
 
\t \t \t \t \t <div> \t \t \t \t \t \t 
 
\t \t \t \t \t \t <i class="fa fa-search" aria-hidden="true"></i> \t \t \t \t \t 
 
\t \t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t </div> \t \t \t 
 
\t \t \t </div> \t \t \t \t \t 
 
\t \t \t <div class="from-to"> \t \t \t 
 
\t \t \t \t <div class="from"> 
 
\t \t \t \t \t <div class="label"> 
 
\t \t \t \t \t \t <label>Vanaf</label> 
 
\t \t \t \t \t \t <input placeholder="Inklok" type="text" id="txtFrom" /> \t 
 
\t \t \t \t \t </div> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t <i class="fa fa-calendar-o" aria-hidden="true"></i> \t \t \t 
 
\t \t \t \t </div> \t \t \t 
 
\t \t \t \t <div class="to"> 
 
\t \t \t \t \t <div class="label"> 
 
\t \t \t \t \t \t <label>Tot</label> \t 
 
\t \t \t \t \t \t <input placeholder="Uitklok" type="text" id="txtTo" /> 
 
\t \t \t \t \t </div> \t \t \t \t 
 
\t \t \t \t \t <i class="fa fa-calendar-o" aria-hidden="true"></i> \t \t \t 
 
\t \t \t \t </div> \t \t 
 
\t \t \t </div> \t \t \t 
 
\t \t \t <div class="field right"> 
 

 
\t \t \t \t <div class="label"> 
 
\t \t \t \t \t <label>Aantal gaste</label> \t \t \t \t 
 
\t \t \t \t \t <select id="search-pax" name="pax" class="ls-select "> 
 
\t \t \t \t \t \t <option value="1">1 gas</option> 
 
\t \t \t \t \t \t <p>Vim aqui pra vadiar</p> 
 
\t \t \t \t \t \t <option value="2">2 gaste</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="3">3 gaste</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="4">4 gaste</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="5">5 gaste</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="6">6 gaste</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="7">7 gaste</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="8">8 gaste</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="9">9 gaste</option> \t \t \t \t \t 
 
\t \t \t \t \t \t <option value="10">10 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="11">11 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="12">12 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="13">13 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="14">14 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="15">15 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="16">16 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="17">17 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="18">18 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="19">19 gaste</option> \t \t \t \t 
 
\t \t \t \t \t \t <option value="20">20 gaste</option> \t \t \t \t 
 
\t \t \t \t \t </select> \t 
 
\t \t \t \t </div> \t \t \t 
 
\t \t \t \t <div class="icon" tabindex="0"> 
 
\t \t \t \t \t <div> 
 
\t \t \t \t \t \t <i class="fa fa-user" aria-hidden="true"></i> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> \t \t \t 
 
\t \t \t </div> \t \t \t 
 
\t \t \t <a id="atributo"href="#" target="_blank">SOEK AKKOMMODASIE</a> \t \t 
 
\t \t </div>

Nehmen