根据Node.js中的另一个下拉列表动态选择下拉列表

时间:2019-02-12 00:34:50

标签: javascript jquery

我在mongodb中有一个集合“国家”。 猫鼬的架构如下:

export ENV_POD_CIDR="10.200.1.0/24";vagrant provision worker-1

例如:

{ 
id: number field(autoincrement by 1), 
short: //stores IN, US, UK 
Name: //stores India, United States, United Kingdom 
}

在用户界面中,我有两个下拉菜单:short和country。 short下拉列表绑定到short,country下拉列表绑定到country collection的名称字段。

现在我的要求是:当我在短下拉列表中选择“ IN”时,应在“国家/地区”下拉列表中选择“印度”。

任何人都可以建议如何执行此要求。

谢谢

1 个答案:

答案 0 :(得分:0)

$(function () {
  $('#country').change(function() {
    const state = $('#state');
    state.empty();
    if (this.value) {
      getStates(this.value).then(function (states) {
        states.forEach(s => { state.append($(`<option>${s}</option>`)); });
      });
    }
  });
  
  function getStates(countryId) {
    // Returning a promise to simulate calling your node back end
    // Non mock should return $.get('states/' + countryId)
    return new Promise(function(resolve, reject) {
      resolve(
        countryId === '1' ? ['Andhra Pradesh', 'Arunachal Pradesh'] :
        countryId === '2' ? ['New York', 'New Jersey', 'Wasington', 'California'] :
        ['Bedfordshire', 'Berkshire']
      );
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country">
  <option value="">Please select</option>
  <option value="1">India</option>
  <option value="2">United States</option>
  <option value="3">United Kingdom</option>
</select><br>

<select id="state">
</select>