JQuery 或 Javascript 过滤器选择选项

Question

我正在开发一个应用程序，它的表单包含两个用数组动态填充的选择。

如果第一个选择没有选择，则第二个选择被禁用，我需要过滤第二个选择的选项，尊重第一个选择。

虽然我必须将这些值传递给另一个 PHP 页面，但我不能使用 value 属性进行过滤。

我尝试使用自定义属性但没有结果。

这是我的代码，

<tr>
    <td style="color: white;">Seleziona data: </td>
    <td>
        <select class="form-control" name="data" id="select1">
            <option value="prova" disabled selected> Scegli</option>
            <?php for ($y=0; $y<count($giorni); $y++){ $giorno=$ giorni[$y];?>
            <option value="<?php echo $giorno; ?>" id="<?php echo $y; ?>">
                <?php echo $giorno; ?> </option>
            <?php } ?>
        </select>
    </td>
</tr>
<tr>
    <td style="color: white;">Seleziona ora: </td>
    <td>
        <select class="form-control" name="ora" id="select2" disabled>
            <?php $count=1 ; while ($count <=3 ){ if ($count==1 ){ for ($g=0; $g<count($ora1); $g++){ ?>
            <option id="<?php echo $count-1; ?>" value="<?php echo $ora1[$g]; ?>">
                <?php echo $ora1[$g]; ?>
            </option>
            <?php } $count ++; } ?>
            <?php if ($count==2 ){ for ($g=0; $g<count($ora2); $g++){ ?>
            <option id="<?php echo $count-1; ?>" value="<?php echo $ora2[$g]; ?>">
                <?php echo $ora2[$g]; ?>
            </option>
            <?php } $count ++; } ?>
            <?php if ($count==3 ){ for ($g=0; $g<count($ora2); $g++){ ?>
            <option id="<?php echo $count-1; ?>" value="<?php echo $ora3[$g]; ?>">
                <?php echo $ora3[$g]; ?>
            </option>
            <?php } $count ++; } } ?>
        </select>
      </td>
  </tr>

JAVASCRIPT：

<script>
    document.getElementById('select1').onchange = function() {
        document.getElementById('select2').disabled = false;
    };
</script>
<script>
    $("#select1").change(function() {
        if ($(this).data('options') == undefined) {
            /*Taking an array of all options-2 and kind of embedding it on the select1*/
            $(this).data('options', $('#select2 option').clone());
        }
        var id = $(this).id();
        var options = $(this).data('options').filter('[id=' + id + ']');
        $('#select2').html(options);
    });
</script>

我该如何解决？

谢谢

Answer 1

您可以使用json_encode 函数在您的 PHP 代码中生成 JSON 对象，并在客户端动态创建 select2 选项。

<tr>
  <td style="color: white;">Seleziona data: </td>
  <td>
    <select class="form-control" name="data" id="select1">
      <option value="prova" disabled selected> Scegli</option>
<?php
  foreach ($giorni as $key => $value) {
?>
      <option value="<?php echo $value; ?>" id="<?php echo $key; ?>" ><?php echo $value; ?></option>
<?php
  }
?>
    </select>
  </td>
</tr>
<tr>
  <td style="color: white;">Seleziona ora: </td>
  <td>
    <select class="form-control" name="ora" id="select2" disabled></select>
  </td>
</tr>

<script>
  // the options object contains the possible option values for select2
  // it can be accessed as an associative array using the selected value from select1
  var options = {
    "0" : <php echo json_encode($ora1, JSON_FORCE_OBJECT) ?>,
    "1" : <php echo json_encode($ora2, JSON_FORCE_OBJECT) ?>,
    "2" : <php echo json_encode($ora3, JSON_FORCE_OBJECT) ?>
  };

  // a helper variable to prevent unnecessary work
  var prevSelectedValue = null;

  // onChange handler for select1
  document.getElementById('select1').onchange = function () {
    var selectedValue = document.getElementById('select1').value;
    if (selectedValue && (prevSelectedValue != selectedValue)) {
      // select1 has changed so there is work to do
      // 1 - get a handle on select2 to make code more legible
      var select2 = document.getElementById('select2');
      // 2 - remove all existing options
      select2.options.length = 0;
      // 3 - add new options
      var obj = options[selectedValue];
      // iterate through the object to get the keys and values
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          var newOption = document.createElement('option');
          newOption.text = obj[key];
          newOption.value = key;
          select2.options.add(newOption);
        }
      }
      // 4 - enable select2
      select2.disabled = false;
      // 5 - record select1 change in prevSelectedValue
      prevSelectedValue = selectedValue;
    }
  };
</script>

Answer 2

您的 html 存在问题。具有相同 ID 的选项不止一个。在 html 文档上，id 必须是唯一的。

出于同样的原因，您无法根据 id 值过滤您的选项。

您应该做的是使用data- 属性而不是id 属性。这将允许您对其进行过滤。