辅助下拉字段不可操作

Question

我的表单的第二个下拉字段将不会填充，我不知道为什么它不起作用。我有我的html链接到jquery存储库，我相信我的JS工作，因为当其他表单字段被删除时，它在我的小提琴中可操作。我只是不知道如何解决这个问题。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jque‌​ry.min.js"></script>
<form class="reg-page" method="post" action="http://www.aviationmaintenance.edu/php/sendinfo.php" data-ajax="false" enctype="multipart/form-data">
            <input type="text" name="first_Name" placeholder="First Name" required><br><br>
            <input type="text" name="last_Name" placeholder="Last Name" required><br><br>
            <input type="text" name="email" placeholder="Email" required><br><br>
            <input type="text" name="telephone" placeholder="Your Phone Number" required>
            <br><br>
            <select class="form-control" id="campus" name="campus" required="" 
    title="Campus">
    <option value="AIMNAT" style="alignment-adjust:middle;" 
 selected="selected">Select Your Nearest Location</option>
    <option value="AMA">Atlanta, GA</option>
    <option value="AMD">Dallas, TX</option>
    <option value="AMH">Houston, TX</option>
    <option value="AMK">Kansas City, MO</option>
    <option value="AIML">Las Vegas, NV</option>
    <option value="AMP">Philadelphia, PA</option>
    <option value="AMS">San Francisco, CA</option>
    <option value="AMN">Virginia Beach, VA</option>
    <option value="AMM">Washington, DC</option>
    </select>
    <br><br>
<select id='dates'>
<option selected="selected">Select Your Schedule</option>
</select>
<br><br>
<input type = "hidden" name = "LinkId" value ="d5a1336b-f6a0-434a-b3c9-d5e174963c67" /> <input type = "submit" value = "Purchase Your Course" /> 
</form>

JS

var locations = {
AMA : { 
  0: "Select Your Schedule",
  1: "August 19-20",
  2: "September 19-20",
  3: "January 19-20",
  },
AMD : { 
  0: "Select Your Schedule",
  1: "August 5-6",
  2: "August 12-13",
  3: "September 9-10",
  4: "September 16-17",
  5: "October 14-15",
  6: "October 21-22",
  7: "November 11-12",
  8: "November 18-19",
  },
AMH : {
  0: "Select Your Schedule",
  1: "August 5-6",
  2: "August 12-13",
  3: "September 23-24",
  4: "September 30-1",
  },
AMK : { 
  0: "Select Your Schedule",
  1: "August 26-27",
  },
AIML : {
  0: "August 19-22",
  1: "October 21-22",
 },
AMS : { 
  0: "Select Your Schedule",
  1: "September 23 & 30",
  },
AMP : { 
  0: "Select Your Schedule",
  1: "August 26-27",
  },
AMN : { 
  0: "Select Your Schedule",
  1: "September 16-17",
  2: "September 23-24",
  },
AMM : { 
  0: "Select Your Schedule",
  1: "October 14-15",
  2: "October 21-22",
  },
  };

// when user selects a location
$('#campus').on('change', function() {
// get selected option
var location = $('#campus').find(':selected').val();
// clear the pervious options for dates
$('#dates').empty();

// popluate dates
$.each(locations[location], function(index) {
  $('#dates').append('<option value="' + index + '">' + this + "</option>");
 });
 });

您可能还会看到我的jsfiddle

非常感谢您的时间！

Answer 1

在这种情况下，你的jsfiddle显示你的Jquery库的引用中有一个奇怪的符号。

只需删除符号或将其替换为正确的jquery引用即可解决问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>