Question

我正在尝试创建一个在选择特定值时隐藏特定选项的函数。我的选择框#exampleSelect1包含3个值：Greenline_Veranda, Profiline_Veranda, Highline_Veranda每个值都有我需要显示的特定颜色。

颜色存储在我的数据库中，我在选择框#exampleSelect2中填充这些颜色。但我不想显示#exampleSelect1的所有值的所有颜色。

示例：

我的数据库中有5种颜色：Green, Blue, Purple, Pink, Yellow
首先，我在selectbox Greenline_Veranda中选择#exampleSelect1我只想在Green, Yellow中为#exampleSelect2显示颜色Greenline_Veranda。但是当我更改#exampleSelect1的值时，我想为该特定值显示其他颜色。

我已经有一个功能正常工作，但它有很多代码，我认为有一种更简单的方法。

以下是HTML代码：

  <div class="form-group">
    <label for="exampleSelect1">Ik ben op zoek naar een:</label>
    <select class="form-control" id="exampleSelect1" name="typeSelect">
     <option selected="selected">Selecteer een type</option>
      <?php
                  if ($result->num_rows > 0) {
                        // output data of each row
                        while($row = $result->fetch_assoc()) {
                            echo "<option value='".$row["opzoekValue"]."'>" . $row["opzoekName"]. "</option>";
                        }
                    } else {
                        echo "0 results";
                    }   
              ?>
    </select>
  </div>

<div class="form-group">
    <label for="exampleSelect1">Kleurstelling:</label>
    <select class="form-control" id="exampleSelect2">
     <option selected="selected">Selecteer een kleur</option>
      <?php
                  if ($resultKleur->num_rows > 0) {
                        // output data of each row
                        while($row = $resultKleur->fetch_assoc()) {
                            echo "<option value='".$row["kleurValue"]."'>" . $row["kleurName"]. "</option>";
                        }
                    } else {
                        echo "0 results";
                    }   
              ?>
    </select>
  </div>

这是Javascript函数，用于显示特定值的特定颜色。

$(document).ready(function(){
  $("#exampleSelect1").change(function() {
      var val = $(this).val();
      if(val == 'Greenline_Veranda') {
          $('#form-zonwering').css('display', 'block');
          $("select option:contains('Blauw Structuurlak')").css("display","none");
          $("select option:contains('Ral 9016')").css("display","none");
          $("select option:contains('Ral 9001')").css("display","none");
          $("select option:contains('Brons Structuurlak')").css("display","none");
          $("select option:contains('Silver Structuurlak')").css("display","none");
          $("select option:contains('Licht Eiken')").css("display","none");
          $("select option:contains('Donker Eiken')").css("display","none");
          $("select option:contains('Zwart Structuurlak')").css("display","none");
          $("select option:contains('Bruin Structuurlak')").css("display","none");
          $("select option:contains('Grijs Structuurlak')").css("display","none");
          $("select option:contains('Rood Structuurlak')").css("display","none");
          $("select option:contains('Groen Structuurlak')").css("display","none");
          $("select option:contains('Ral 9001 Structuurlak')").css("display","none");
          $("select option:contains('Eluxal EV-1')").css("display","none");
      } else if (val == 'Profiline_Veranda') {
          $('#form-zonwering').css('display', 'block');
          $("select option:contains('Blauw Structuurlak')").css("display","block");
          $("select option:contains('Ral 9016')").css("display","block");
          $("select option:contains('Ral 9001')").css("display","block");
          $("select option:contains('Brons Structuurlak')").css("display","block");
          $("select option:contains('Silver Structuurlak')").css("display","block");
          $("select option:contains('Licht Eiken')").css("display","block");
          $("select option:contains('Donker Eiken')").css("display","block");
          $("select option:contains('Zwart Structuurlak')").css("display","block");
          $("select option:contains('Bruin Structuurlak')").css("display","block");
          $("select option:contains('Grijs Structuurlak')").css("display","block");
          $("select option:contains('Rood Structuurlak')").css("display","block");
          $("select option:contains('Groen Structuurlak')").css("display","block");
          $("select option:contains('Ral 9001 Structuurlak')").css("display","block");
          $("select option:contains('Eluxal EV-1')").css("display","block");
          $("select option:contains('Antraciet Structuurlak')").css("display","block");
          $("select option:contains('Ral 9010 Structuurlak')").css("display","none");
      } else {
      $('#form-zonwering').css('display', 'none');
      $("select option:contains('Blauw Structuurlak')").css("display","block");
      $("select option:contains('Ral 9016')").css("display","block");
      $("select option:contains('Ral 9001')").css("display","block");
      $("select option:contains('Brons Structuurlak')").css("display","block");
      $("select option:contains('Silver Structuurlak')").css("display","block");
      $("select option:contains('Licht Eiken')").css("display","block");
      $("select option:contains('Donker Eiken')").css("display","block");
      $("select option:contains('Zwart Structuurlak')").css("display","block");
      $("select option:contains('Bruin Structuurlak')").css("display","block");
      $("select option:contains('Grijs Structuurlak')").css("display","block");
      $("select option:contains('Rood Structuurlak')").css("display","block");
      $("select option:contains('Groen Structuurlak')").css("display","block");
      $("select option:contains('Ral 9001 Structuurlak')").css("display","block");
      $("select option:contains('Eluxal EV-1')").css("display","block");
      }
  });
});

所以我的问题是，我可以缩短Javascript功能，以便在更多选择框上使用它吗？

Answer 1

这是一段代码。

HTML

<div class="form-group">
    <label for="exampleSelect1">Ik ben op zoek naar een:</label>
    <select class="form-control" id="exampleSelect1" name="typeSelect">
     <option selected="selected" value="">Selecteer een type</option>
     <option value="Greenline_Veranda">Greenline Veranda</option>
     <option value="Profiline_Veranda">Profiline Veranda</option>
    </select>
  </div>

<div class="form-group">
    <label for="exampleSelect2">Kleurstelling:</label>
    <select class="form-control" id="exampleSelect2">
     <option selected="selected">Selecteer een kleur</option>
       <option attr-value="Greenline_Veranda">Greenline Veranda</option>
       <option attr-value="Profiline_Veranda">Profiline Veranda</option>
       <option attr-value="Greenline_Veranda">Greenline Veranda</option>
       <option attr-value="Profiline_Veranda">Profiline Veranda</option>
       <option attr-value="Greenline_Veranda">Greenline Veranda</option>
       <option attr-value="Profiline_Veranda">Profiline Veranda</option>
       <option attr-value="Greenline_Veranda">Greenline Veranda</option>
       <option attr-value="Profiline_Veranda">Profiline Veranda</option>
       <option attr-value="Greenline_Veranda">Greenline Veranda</option>
       <option attr-value="Profiline_Veranda">Profiline Veranda</option> 
    </select>
  </div>

JS

$(document).ready(function(){
  $("#exampleSelect1").change(function() {
      var val = $(this).val();
      if(val == ''){
      $("#exampleSelect2").find("option").show();
      }else{
      $("#exampleSelect2").find("option:not([attr-value='"+val+"'])").hide();
      $("#exampleSelect2").find("option[attr-value='"+val+"']").show();
      }
  });
});

您可以将第一个选择选项的值绑定到第二个选择选项的attr值。这是一个有效的fiddle

当选择特定值时，jQuery隐藏特定选项

1 个答案:

HTML

JS