如何使用Laravel Eloquent将模型分类值传递到select下拉选择框

以下是不同技术场景下的实现方式：

原生HTML/JS实现 #

拿到模型里的category值后，直接给select元素赋值，会自动匹配对应value的option选中：

<select class="form-control form-select" name="category" aria-label="Default select example" id="categorySelect">
  <option value=""></option>
  <option value="1">fruit</option>
  <option value="2">vegetables</option>
  <option value="3">meat</option>
</select>

<script>
// 从模型取出Apple对应的category值，这里示例为1
const targetCategory = 1
document.getElementById('categorySelect').value = targetCategory
</script>

如果是静态渲染页面，也可以直接给对应option加selected属性：

<option value="1" selected>fruit</option>

主流框架实现 #

Vue #

用v-model绑定category值即可自动匹配选中：

<template>
  <select v-model="currentCategory" class="form-control form-select" name="category" aria-label="Default select example">
    <option value=""></option>
    <option value="1">fruit</option>
    <option value="2">vegetables</option>
    <option value="3">meat</option>
  </select>
</template>
<script>
export default {
  data() {
    return {
      // 直接赋值Apple对应的category值1
      currentCategory: 1
    }
  }
}
</script>

React #

给select绑定value属性为目标category值：

import { useState } from 'react'

function CategorySelect() {
  // 初始值设为Apple对应的category值1
  const [currentCategory, setCurrentCategory] = useState(1)

  return (
    <select 
      value={currentCategory}
      onChange={(e) => setCurrentCategory(e.target.value)}
      className="form-control form-select" 
      name="category" 
      aria-label="Default select example"
    >
      <option value=""></option>
      <option value="1">fruit</option>
      <option value="2">vegetables</option>
      <option value="3">meat</option>
    </select>
  )
}

服务端渲染（以PHP为例） #

渲染option时判断匹配目标值，动态加selected属性：

<?php
// 从模型取出Apple对应的category值，示例为1
$targetCategory = 1;
?>
<select class="form-control form-select" name="category" aria-label="Default select example">
  <option value=""></option>
  <option value="1" <?php echo $targetCategory == 1 ? 'selected' : ''?>>fruit</option>
  <option value="2" <?php echo $targetCategory == 2 ? 'selected' : ''?>>vegetables</option>
  <option value="3" <?php echo $targetCategory == 3 ? 'selected' : ''?>>meat</option>
</select>

内容的提问来源于stack exchange，提问作者Ihda Anwari