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>