在级联自动完成下拉列表中设置值

Question

我只是想在＆＃34; City＆＃34; ddl，＆＃34;不住在城市＆＃34;选择的选项---＆gt;在＆＃34;首席城市＆＃34; ddl，＆＃34; Ville de saint＆＃34;选项应该自动选择。但我无法做到.......＆＃34; Ville de saint＆＃34;两个下拉列表中都存在选项....我的情况就像这样...... ...

这是下拉代码：

  <div>          
   @Html.DropDownList(Model.townProp, new SelectList(Bmsa.UI.Utility.Utility.GetTown(Model.townId), "Value", "Text", Model.townId), new { onchange = "GetchiefTown();" }) </div>

   <div> @Html.DropDownList(Model.chiefTownProp, new SelectList(Bmsa.UI.Utility.Utility.GetchiefTown(Model.communeId), "Value", "Text", Model.chiefTownId))</div>

我已根据某些帖子尝试了一些以下功能，但无法获得结果：

    function GetchiefTown() {

    $('#@Model.chiefTownProp').prop('selectedIndex', 2);
    $('#@Model.chiefTownProp').attr('selectedIndex', 2);
    $('#@Model.chiefTownProp').val("Ville de saint louis de Nord");
    $('#@Model.chiefTownProp').val(2);
    $('#@Model.chiefTownProp').prop('selected', true);
    }

自动完成功能我使用了jquery Select（）插件。浏览器中下拉列表的DOM如下所示

由于这个插件，我需要有什么不同吗？

有人可以建议我缺少什么吗？

Answer 1

您可以将更改处理程序用于城市选项。当不在城市居住时，选择变更处理程序将Chief City设置为Ville de saint。举一个简单的例子，我们有两个选择：

<label>City:</label>
  <select id="city">
    <option value="1">Select Below</option>
    <option value="2">Doesnot live in city</option>
    <option value="3">Live in city</option>  
  </select>

  <label>Chief city:</label>
  <select id="chief-city">
    <option value="1">Select Below</option>
    <option value="2">Ville de saint</option>
    <option value="3">Other city</option>
  </select>

简单的jQuery代码：

$('#city').change(function() {
  if ($(this).val() == 2)
    $('#chief-city').val('2');
  else
    $('#chief-city').val('1');
});

如果更改 #city 选择，则更改处理程序将验证 #city 选择中的值，在这个例子中，如果值为2，则表示＆＃34; 不会居住在城市＆＃34;如果已选中，则＃chief-city select 中的所选选项将为 Ville de saint

这是这个例子的小提琴：https://jsfiddle.net/alissonmbr/dqzkkzdm/