在laravel中的下拉列表中添加和删除新值

问题描述 投票:0回答:2

大家只想检查,是否可以通过网页添加新数据并永久保存。例如,在我的下拉列表中,我有3个人名,John,Tom和Jerry。在此下拉列表中,我想添加一个名为Keith的新人名,并从下拉列表中删除Jerry名称。

以下是我现在的样子:

<div class="input-group">
          <label><b>List of Class leader:</b></label>
      <select name="class_leader" id="class_leader" class="form-control" >
                 <option value="John" >John</option>
                 <option value="Jerry">Jerry</option>
                 <option value="Tom">Tom</option>
              </select> 
        </div>

那么可以对此进行编辑吗?就像创建一个新的页面或其他东西,以便我可以编辑它

你们能告诉我一些关于该做什么的意见吗?如果可能的话,也许举一些例子让我更好地理解它。

php laravel
2个回答
1
投票

您可以通过多种方式实现此目标,如果需要永久保存此列表,那么使用数据库的方式就是这样。

在Laravel中,您可以创建称为模型和迁移的东西。您可以使用ClassLeader命令创建一个名为php artisan make:model ClassLeader -m的模型,并进行迁移。这将创建模型以及迁移。

现在在您的迁移文件中,您可以为表添加原理图,我建议这样的东西。

//...
public function up()
{
    Schema::create('class_leaders', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name');
        $table->timestamps();
    });
}
//...

现在您可以使用命令php artisan migrate将这个新原理图迁移到数据库,从而允许您在那里存储数据。

您现在可以使用模型通过Eloquent访问此表,方法是将use App\ClassLeader;添加到任何需要使用它的文件的顶部(很可能是控制器),然后像ClassLeader::find(1);一样使用它,或者您可以使用完整的命名空间直接使用它这样的App\ClassLeader::find(1);

然后我建议你添加一个表单,将一个新的ClassLeader提交给数据库,你可以在你的控制器中这样做

//...
$class_leader = new ClassLeader;
$class_leader->name = 'NAME HERE';
$class_leader->save(); // Saves this ClassLeader to the database
//...

然后,为了向所有班级领导者展示,您可以在视图中执行此类操作。

//...
@foreach(App\ClassLeader::all() as $leader)
    <option value="{{ $leader->id }}">{{ $leader->name }}</option>
@endforeach
//...

所有这一切都贯穿整个类领导者表,并通过option DOM元素显示它们。

希望这个答案可以引导您走上正确的道路。


1
投票

我不知道你想要它怎么样,但我只是想给你一个想法,用JS在选择框中添加名字。请看下面的代码!

<!DOCTYPE html>
<html>
<body>

<form>
     <input type='text' id='idea' />
     <input type='button' value='add to list' id='add' />
     <select name="class_leader" id="class_leader" class="form-control">
             <option value="John" >John</option>
             <option value="Jerry">Jerry</option>
             <option value="Tom">Tom</option>
     </select> 
</form>

<script>
   document.getElementById("add").onclick = function() {
   //First things first, we need our text:
   var text = document.getElementById("idea").value; //.value gets input values
   //Now construct a quick list element
   var x = document.getElementById("class_leader");
   var option = document.createElement("option");
   option.text = text;
   x.add(option);

}

在这里,你需要添加输入框,用户将在其中输入任何名称,按下添加后,它将添加到选择框!

希望这会对你有所帮助!!

© www.soinside.com 2019 - 2024. All rights reserved.