Question

首先，我知道这一定很简单，但我不知道如何做我需要做的事情。我需要帮助的是2个 vanilla JS表单下拉字段，列出了一系列位置，然后列出了与它们相关的日期。第二个下拉菜单需要显示一组选定的“课程日期”。由于所有位置都有不同的服务日期，因此第二次下拉菜单需要在第一次初始选择时更改。

我下面有一些HTML和js，我只是不知道如何将两者联系在一起。如果任何人可以为我提供完全可操作的下拉字段，这些字段会根据所选位置或jsfiddle进行更改，这将是奢侈的。

到目前为止我所拥有的HTML（我不知道如何为我的'日期'创建下拉列表）

<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="AMI">Indianapolis, IN</option>
        <option value="AMK">Kansas City, MO</option>
        <option value="AIML">Las Vegas, NV</option>
        <option value="AMO">Orlando, FL</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>

的Javascript

var locations = {
"AMA" : {
    "August 19-20",
    "September 19-20",
    "January 19-20"
},
"AMH" : {
    "August 19-20",
    "September 19-20",
    "January 19-20"
},
"AIML" : {
    "August 19-20",
    "September 19-20",
    "January 19-20"
}
};

// when user selects a location
$('.locations-select').on('change', function() {
// get selected option
var location = $('.locations-select option:selected');

// clear the pervious options for dates
$('.dates-select').empty();

// popluate dates
$.each(locations[locaiton], function(idx, el) {
    $('.dates-select').append('<option value="' + idx + '">' + el + "</option>");
})
})

它甚至可以与显示第二个字段的jsfiddle类似，我只需要填充多个位置的相关日期。

Answer 1

有一些错误和许多缺失的东西，但我把它整理出来，以制作我认为你需要的jsfiddle。现在，既然我希望你从中学习，而不仅仅是有人为你做，我会列出我改变的事情以及我做的原因。

JS

var locations = {
  AMA : { 
      0: "August 19-20",
      1: "September 19-20",
      2: "January 19-20"
      },
  AMH : {
      0: "August 19-21",
      1: "September 19-21",
      2: "January 19-21"
  },
  AIML : {
      0: "August 19-22",
      1: "September 19-22",
      2: "January 19-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>");
  });
});

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <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="AMI">Indianapolis, IN</option>
        <option value="AMK">Kansas City, MO</option>
        <option value="AIML">Las Vegas, NV</option>
        <option value="AMO">Orlando, FL</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>
<select id='dates'>
</select>

HTML中没有选择日期。所以我创建了一个新的。
我在执行此操作时使用HTML ID来定位select（首选项），您只需替换“。”通过JQuery中的“＃”。
“locations”对象不是有效的JavaScript对象。它看起来像我的JSON字符串。您可以像我一样更改它，使其成为JavaScript对象，或通过添加JSON.parse()将其解析为JSON。
我改变了获得所选选项值的方式。我首先使用id定位项目，然后选择find所选元素并获取其value。如果您想使用它，也可以获得text。
最后，在$ .each中，我使用索引（作为参数）作为字段的值，我使用对象本身（this）作为值。

下拉字段随位置而变化

1 个答案: