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

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

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

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

Answer 2

您可以使用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>