,你可以按照以下步骤来实现:
Route::get('/refresh-dropdown', 'DropdownController@refresh')->name('refresh.dropdown');
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Option;
class DropdownController extends Controller
{
public function refresh(Request $request)
{
$selectedValue = $request->input('selectedValue');
// 根据选择的值查询相应的下拉列表数据
$options = Option::where('value', $selectedValue)->get();
// 构造下拉列表的选项HTML
$html = '<option value="">请选择</option>';
foreach ($options as $option) {
$html .= '<option value="' . $option->id . '">' . $option->name . '</option>';
}
return $html;
}
}
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<select id="parent" name="parent" onchange="refreshDropdown(this.value)">
<option value="">请选择</option>
<!-- 父级下拉列表的选项 -->
</select>
<select id="child" name="child">
<option value="">请选择</option>
<!-- 子级下拉列表的选项 -->
</select>
<script>
function refreshDropdown(selectedValue) {
$.ajax({
url: '{{ route('refresh.dropdown') }}',
type: 'GET',
data: {selectedValue: selectedValue},
success: function(data) {
$('#child').html(data); // 刷新子级下拉列表的数据
}
});
}
</script>
php artisan make:migration create_options_table --create=options
然后,在生成的迁移文件中,定义表的结构。例如,你可以在database/migrations/xxxx_xx_xx_xxxxxx_create_options_table.php文件中添加如下代码:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateOptionsTable extends Migration
{
public function up()
{
Schema::create('options', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->string('value');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('options');
}
}
运行迁移命令,创建数据库表:
php artisan migrate
以上就是在Laravel 5.4中使用Ajax进行选择时刷新选择下拉列表数据的步骤。通过Ajax请求,根据选择的值来查询相应的下拉列表数据,并将数据返回到前端,实现选择时的动态刷新效果。如果你想了解更多关于Laravel的知识,可以访问腾讯云的Laravel产品介绍页面。
领取专属 10元无门槛券
手把手带您无忧上云