Question

您可以通过以下方式帮助我：

我的代码：

<select name="genform[praeferenz_1]" id="genform_praeferenz_1">
<option value="placeholder_1">Bitte wählen...</option>
<option value="rot_1">Rot</option>
<option value="weiss_1">Weiß</option>
<option value="gelb_1">Gelb</option>
<option value="blau_1">Blau</option>
</select><

<select name="genform[praeferenz_2]" id="genform_praeferenz_2">
<option value="placeholder_2">Bitte wählen...</option>
<option value="rot_2">Rot</option>
<option value="weiss_2">Weiß</option>
<option value="gelb_2">Gelb</option>
<option value="blau_2">Blau</option>
</select>

<select name="genform[praeferenz_3]" id="genform_praeferenz_3">
<option value="palceholder_3">Bitte Trikotfarbe wählen...</option>
<option value="rot_3">Rot</option>
<option value="weiss_3">Weiß</option>
<option value="gelb_3">Gelb</option>
<option value="blau_3">Blau</option>
</select>

<select name="genform[praeferenz_4]" id="genform_praeferenz_4">
<option value="placeholder_4">Bitte wählen...</option>
<option value="rot_4">Rot</option>
<option value="weiss_4">Weiß</option>
<option value="gelb_4">Gelb</option>
<option value="blau_4">Blau</option>
</select>

如果您选择了一个选项，则应删除其他选项。

示例：

如果我在第一个下拉列表中选择“rot_1”，则rot_2，rot_3，rot_4在以下下拉列表中不可用。

然后当我在第二次drobdown中选择gelb_2时。

在以下下拉列表中，不再提供gelb_3和gelb_4。

依旧......

Answer 1

请根据您的要求找到以下代码段。

＆＃13;

$(document).ready(function() {
  $(document).on("change", "select", function() {
    var cur_id = $(this).attr("id");
    var cur_val = $(this).val();
    if (typeof cur_val != 'undefined' && cur_val != '') {
      subs = cur_val.substr(0, cur_val.indexOf('_'));
      $("select[id!='" + cur_id + "']").each(function() {
        $(this).find("option").each(function() {
          //$(this).show();
          var cur_v = $(this).val();
          subst = cur_v.substr(0, cur_v.indexOf('_'));
          if (subs == subst) {
            $(this).hide();
          }
        });
      });
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="genform[praeferenz_1]" id="genform_praeferenz_1">
  <option value="placeholder_1">Bitte wählen...</option>
  <option value="rot_1">Rot</option>
  <option value="weiss_1">Weiß</option>
  <option value="gelb_1">Gelb</option>
  <option value="blau_1">Blau</option>
</select>

<select name="genform[praeferenz_2]" id="genform_praeferenz_2">
  <option value="placeholder_2">Bitte wählen...</option>
  <option value="rot_2">Rot</option>
  <option value="weiss_2">Weiß</option>
  <option value="gelb_2">Gelb</option>
  <option value="blau_2">Blau</option>
</select>

<select name="genform[praeferenz_3]" id="genform_praeferenz_3">
  <option value="palceholder_3">Bitte Trikotfarbe wählen...</option>
  <option value="rot_3">Rot</option>
  <option value="weiss_3">Weiß</option>
  <option value="gelb_3">Gelb</option>
  <option value="blau_3">Blau</option>
</select>

<select name="genform[praeferenz_4]" id="genform_praeferenz_4">
  <option value="placeholder_4">Bitte wählen...</option>
  <option value="rot_4">Rot</option>
  <option value="weiss_4">Weiß</option>
  <option value="gelb_4">Gelb</option>
  <option value="blau_4">Blau</option>
</select>

＆＃13;

substr()方法返回起始索引与其后的字符数之间的字符串部分。

indexOf()方法返回第一次出现的指定值的调用String对象中的索引，从fromIndex开始搜索。如果找不到值，则返回-1。

动态选择依赖下拉列表

1 个答案: