jquery 代码不工作

Question

大家好，

我在 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>

但是在页面加载时它不起作用。

Answer 1

您必须将 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>');
    }
});
});