美好的一天,
我在html页面上使用jquery脚本遇到了问题。
该脚本在jsfiddle
上正常工作在我的页面上,我使用了:
<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript">
</script> <script src="bookform.js" type="text/javascript"></script>
Pickup location:<br><input placeholder="dd-mm-yyyy" type="date" name="date" required="required">
Name on meeting plate:<br><input type="text" name="name" required><br>
Your phone number:<br><input type="text" name="phone" required><br>
Time of pickup:<br> <input class="large" type="text" name="time" required="required"><br>
Pickup location:<br>
<select name="select1" id="select1">
<option>Where to pickup</option>
<option value="pick_airport">Airport</option>
<option value="pick_railway">Railway station</option>
<option value="pick_address">Address</option>
</select>
<div id ="pick_nextStep"></div>
Dropoff location:<br>
<select name="select2" id="select2">
<option>Where to dropoff</option>
<option value="drop_airport">Airport</option>
<option value="drop_railway">Railway station</option>
<option value="drop_address">Address</option>
</select>
<div id ="drop_nextStep"></div>
但是在页面加载时它不起作用。
答案 0 :(得分:3)
您必须将bookform.js
的代码包装在DOM就绪处理程序中,就像:
$(document).ready(function() {
$('#select1').change(function(){
if($(this).val() == 'pick_airport'){
$('#pick_nextStep').html('<select name="pickup_location" required="required" id="select1"><option>Select airport</option><option value="Sheremetievo (SVO)">Sheremetievo (SVO)</option><option value="Domodedovo (DME)">Domodedovo (DME)</option><option value="Vnukovo (VKO)">Vnukovo (VKO)</option></select><br>Flight: <br><input type="text" name="flight" required size="20" maxlength="255">');
}
if($(this).val() == 'pick_railway'){
$('#pick_nextStep').html('<select name="pickup_location" required="required" id="select1"><option value="Belorusskiy">Belorusskiy</option><option value="Kazanskiy">Kazanskiy</option><option value="Kurskiy">Kurskiy</option><option value="Kievskiy">Kievskiy</option><option value="Leningradskiy">Leningradskiy</option><option value="Paveleckiy">Paveleckiy</option><option value="Rizskiy">Rizskiy</option><option value="Saveloskiy">Savelovskiy</option><option value="Yaroslavskiy">Yaroslavskiy</option></select><br>Wagon:<br><input type="text" name="flight" required size="20" maxlength="255">');
}
if($(this).val() == 'pick_address'){
$('#pick_nextStep').html('Pickup address:<br><input name="pickup_location" type="text" size="20" maxlength="255">');
}
});
$('#select2').change(function(){
if($(this).val() == 'drop_airport'){
$('#drop_nextStep').html('<select name="pickup_location" required="required" id="select1"><option>Select airport</option><option value="Sheremetievo (SVO)">Sheremetievo (SVO)</option><option value="Domodedovo (DME)">Domodedovo (DME)</option><option value="Vnukovo (VKO)">Vnukovo (VKO)</option></select><br>');
}
if($(this).val() == 'drop_railway'){
$('#drop_nextStep').html('<select name="pickup_location" required="required" id="select2"><option value="Belorusskiy">Belorusskiy</option><option value="Kazanskiy">Kazanskiy</option><option value="Kurskiy">Kurskiy</option><option value="Kievskiy">Kievskiy</option><option value="Leningradskiy">Leningradskiy</option><option value="Paveleckiy">Paveleckiy</option><option value="Rizskiy">Rizskiy</option><option value="Saveloskiy">Savelovskiy</option><option value="Yaroslavskiy">Yaroslavskiy</option></select>')
}
if($(this).val() == 'drop_address'){
$('#drop_nextStep').html('Your destination address:<br><input type="text" name="dropoff_location" required>');
}
});
});
答案 1 :(得分:1)
尝试将代码包装在DOM就绪处理程序$(document).ready(function() {....})
或更短的$(function() {....})
内,以确保在执行jQuery代码之前正确加载所有DOM元素。
$(function() {
// Your code here
});
答案 2 :(得分:1)
在页面的head标签中添加jquery库的脚本标签。就像这样:
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
</head>
答案 3 :(得分:0)
问题可能是您的脚本在加载所有DOM元素之后加载。
你需要反过来。上面有两个答案:一个说明要在<script></script>
容器中包含您的<head>
标记。
它可能有效,但脚本可能会在整个页面加载之前拍摄。要防止这种情况发生,只需将所有jQuery代码包装到此函数中:
$(function(), {
// your code here;
});
与$(document).ready()
相同,依此类推。
如果仍然无效,请尝试启用控制台(在Google Chrome中按F12并搜索错误)。