如何將 php 變量從我的選擇傳遞給 jquery？

Question

我有下一個代碼來加載我網站中的所有國家：

$(document).ready(function() {
  $.ajax({
    type: 'GET',
    url: '/comunidades',

    success: function(response) {
      $("#cbx_comunidad").empty();
      // console.log(response);
      $("#cbx_comunidad").prepend("<option value='' selected='selected'>Seleccione Comunidad</option>");
      for (i = 0; i < response.length; i++) {
        $("#cbx_comunidad").append("<option value='" + "rellena una opcion" + "</option>");
        //console.log('response' + response[i].id);
        $("#cbx_comunidad").append("<option value='" + response[i].id + "'>" + response[i].comunidad + "</option>");
      }
    }
  });
});

並在我的網站上加載我所有的省份：

$('#cbx_comunidad').on('change', function(event) {
  $.ajax({
    type: 'GET',
    url: '/provincias/' + event.target.value,

    success: function(response) {
      $("#cbx_provincia").empty();
      // console.log(response);
      $("#cbx_provincia").prepend("<option value='' selected='selected'>Seleccione Provincia</option>");
      for (i = 0; i < response.length; i++) {
        $("#cbx_provincia").append("<option value='" + "rellena una opcion" + "</option>");
        $("#cbx_provincia").append("<option value='" + response[i].id + "'>" + response[i].provincia + "</option>");
      }
    }   
  });
});

我想從 select 中設置默認值，如下所示：

function setDefault(defValue) {
  alert(defValue);
  $('#cbx_comunidad option').each(function () {
    if (($(this).attr('value')) === defValue) {
      $(this).attr('selected', 'selected');
    }    
  });
}

在我的 php 代碼中，我需要類似於下一個的內容：

<label for="cbx_comunidad">Seleccione Comunidad:</label>
$usercomunidad = $user->comunidad_id
<select onload="setDefault($user->comunidad_id)"
        class="form-control @error('cbx_comunidad') is-invalid @enderror"
        name="cbx_comunidad"
        id="cbx_comunidad"
        required></select>

這可能有一個觸發器將我的 php 變量傳遞給我的 jquery 代碼？ 如何選擇我的默認值來更新視圖？

Answer 1

如果您打算將它們作為 JS 參數傳遞，則需要回顯 php 變量。 ( onload="setDefault({{ $user->comunidad_id }})" )

您也可以在您的選擇中使用data-*屬性。

<label for="cbx_comunidad">Seleccione Comunidad:</label>
<select class="form-control @error('cbx_comunidad') is-invalid @enderror"
        name="cbx_comunidad"
        id="cbx_comunidad"
        data-id="{{ $user->comunidad_id ?: '' }}"
        required></select>

$('#cbx_comunidad').on('change', function(event) {
  $.ajax({
    type: 'GET',
    url: '/provincias/' + event.target.value,

    success: function(response) {
      let value = $("#cbx_provincia").attr('data-id');
      $("#cbx_provincia").empty();
      $("#cbx_provincia").prepend("<option disabled "+(value ? '' : 'selected')+">Seleccione Provincia</option>");
      for (i = 0; i < response.length; i++) {
        $("#cbx_provincia").append("<option value='" + response[i].id + "'" + (value == response[i].id ? 'selected' : '') + ">" + response[i].provincia + "</option>");
      }
    }   
  });
});

Answer 2

我應該能夠在標記中打印經過消毒的 PHP 數據，如下所示。

<label for="cbx_comunidad">Seleccione Comunidad:</label>
<select onload="setDefault('<?php echo htmlentities($user->comunidad_id, ENT_QUOTES, 'UTF-8'); ?>')" class="form-control @error('cbx_comunidad') is-invalid @enderror" name="cbx_comunidad" id="cbx_comunidad" required>
</select>

Answer 3

您在文檔加載時從 ajax 填充選擇，但嘗試在加載選擇元素后立即設置所選值。 這意味着選擇是空的，當時沒有匹配的選項。 您應該嘗試在添加/附加所有選項后進行選擇。 所以在 select 中使用 data-id 來存儲選定的值並讀取此值以在附加所有選項后預先選擇該選項。

$(document).ready(function() {
  $.ajax({
    type: 'GET',
    url: '/comunidades',

    success: function(response) {
      $("#cbx_comunidad").empty();
      // console.log(response);
      $("#cbx_comunidad").prepend("<option value='' selected='selected'>Seleccione Comunidad</option>");
      for (i = 0; i < response.length; i++) {
        $("#cbx_comunidad").append("<option value='" + "rellena una opcion" + "</option>");
        //console.log('response' + response[i].id);
        $("#cbx_comunidad").append("<option value='" + response[i].id + "'>" + response[i].comunidad + "</option>");
      }

      $("#cbx_comunidad").val($("#cbx_comunidad").data('id'));
    }
  });
});

在你的 html 中：

<select data-id="$user->comunidad_id"
        class="form-control @error('cbx_comunidad') is-invalid @enderror"
        name="cbx_comunidad"
        id="cbx_comunidad"
        required>
</select>