Question

我有基本的2个下拉列表。基于第一个下拉选择值我想显示第二个下拉列表，但它应该是基于独立的值。例如 -

<select id="loc_type">
  <option value="1">unit</option>
  <option value="2">property</option>
</select>

<select id="my_locations">
  <option value="38564">loc1</option>
  <option value="38565">loc2</option>
  <option value="39206">loc3</option>
  <option value="38805">loc4</option>
  <option value="38436">loc5</option>
</select>

预期输出 - 假设我选择了第一个选项。然后它加载第二个下拉列表，其值为＆＃34; loc1＆＃34;同时，它会加载下一个下拉列表，其值为＆＃34; loc2＆＃34; selected.Separate下拉列表中的每个值。

Answer 1

试试这个

     <select id="loc_type" onchange="getComboA(this)">

然后添加此javascript代码

       <script>
          function getComboA(selectObject) {
          var value = selectObject.value;              
          var element = document.getElementById('my_locations');             
          element.selectedIndex  = value-1;
           }
       </script>

Answer 2

您可以在子选择下拉列表中分配父选择下拉列表的数据组值，并仅使用相同的数据组值显示选项。

这是工作代码段

＆＃13;

$("#loc_type").change(function() {
  //store reference to current select
  var me = $(this);

  //get selected group
  var group = me.find(":selected").val();

  //get the child select by it's ID
  var child = $("#my_locations");

  //hide all child options except the ones for the current group, and get first item
  var newValue = child.find('option').hide().not('[data-group!="' + group + '"]').show().eq(0).val();
  child.trigger("change");

  //set default value
  child.val(newValue);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="loc_type">
  <option value="">Select</option>
  <option value="1">unit</option>
  <option value="2">property</option>
</select>

<select id="my_locations">
  <option data-group ="1" value="38564">loc1</option>
  <option data-group ="1" value="38565">loc2</option>
  <option data-group ="1" value="39206">loc3</option>
  <option data-group ="2" value="38805">loc4</option>
  <option data-group ="2" value="38436">loc5</option>
</select>

＆＃13;

我建议您使用单选按钮而不是下拉菜单进行分离（我认为使用单一选项下拉是没用的）

这里是带有单独单选按钮的工作代码段

＆＃13;

$("#loc_type").change(function() {

  if (this.value == 1) {

    $("#opt1").show();
    $("#opt2").hide();


  } else if (this.value == 2) {

    $("#opt2").show();
    $("#opt1").hide();
  }
});

＆＃13;

#opt1 {
  display: none;
}

#opt2 {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="loc_type">
  <option value="">Select</option>
  <option value="1">unit</option>
  <option value="2">property</option>
</select>


<div id="opt1">
  <input type="radio" name="unit" value="38564">Loc1
  <input type="radio" name="unit" value="38565">Loc2
  <input type="radio" name="unit" value="39206">Loc3
</div>

<div id="opt2">
  <input type="radio" name="property" value="38805">Loc4
  <input type="radio" name="property" value="38808">Loc5
</div>

＆＃13;

为每个选项值

2 个答案: