Laravel：填写一个包含多个下拉列表的表单
Posted
技术标签:
【中文标题】Laravel：填写一个包含多个下拉列表的表单【英文标题】：Laravel : Fill out a form with several drop-down lists 【发布时间】：2021-07-01 09:43:18 【问题描述】：我从 laravel 或 html 示例中查找填写带有多个下拉列表的表单。
这是我的情况。我有这些输入文本name_customer, phone_customer, email_customer，
我希望当我选择客户时，表单字段填写客户信息：（来自数据库的name_customer, phone_customer, email_customer）。
这是我到目前为止所做的。
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>N° Commande</label>
<input
type="text"
class="form-control"
v-model="num_order"
name="num_order"
/>
</div>
<div class="form-group">
<label>customer</label>
<div class="form-check form-check-inline mr-1">
<input
onclick="document.getElementById('select_customer').disabled=!this.checked;
document.getElementById('text_name').disabled=this.checked;
document.getElementById('text_Tel').disabled=this.checked;
document.getElementById('text_Email').disabled=this.checked;
document.getElementById('text_address').disabled=this.checked"
class="form-check-input"
id="inline-checkbox1"
type="checkbox"
value="check1"
v-model="num_order"
name="num_order"
/>
<label
class="form-check-label"
for="inline-checkbox1"
>Existant</label
>
<div class="col-md-8">
<select
class="form-control form-control-sm"
id="select_customer"
name="select_customer"
disabled
onclick="document.getElementById('inline-checkbox1').disabled=!this.checked;"
v-model="customers_id"
@change="getcustomers()"
>
<option disabled value="0">
Choisir un customer
</option>
<option
v-for="customer in customers"
v-bind:key="customer.id"
v-bind:value="customer.id"
name="customers_id"
>
customer.name_customer
</option>
</select>
</div>
</div>
<input
type="text"
class="form-control"
id="text_name"
placeholder="Name"
v-model="name_customer"
name="name_customer"
/>
</div>
<div class="form-group">
<label>Phone</label>
<input
type="text"
class="form-control"
id="text_Tel"
placeholder="Phone"
/>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Adresse du customer</label>
<textarea
rows="4"
class="form-control"
id="text_address"
placeholder="Address"
>
</textarea>
</div>
<div class="form-group">
<label>Email</label>
<input
type="text"
class="form-control"
id="text_Email"
placeholder="Email"
/>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Libellé</label>
<input type="text" class="form-control" />
</div>
<div class="row">
<div class="col-sm-6">
<label>Date Commande</label>
<input type="date" class="form-control" />
</div>
<div class="col-sm-6">
<label>Date Validation</label>
<input type="date" class="form-control" />
</div>
</div>
</div>
</div>
提前谢谢你。
【问题讨论】：
这是对您所面临的实际问题的非常模糊的描述。到目前为止，您尝试了什么，您的应用程序是什么样的？不过……在选择客户后，调用为您提供客户数据的数据服务 API。 api返回后，解析值并填写字段值。 到目前为止，我很困惑，无法开始任何事情，因为我不知道从哪里开始。但我仍在寻找一种方法来在我的表单中加载从选择和下拉列表中检索到的数据。 【参考方案1】：您好，我找到了解决问题的方法。
<select
class="form-control form-control-sm"
id="select_customer"
name="select_customer"
v-model="customers_id"
@change="getcustomers()"
>
<option disabled value="0">
Choose a customer
</option>
<option
v-for="customer in customers"
v-bind:key="customer.id"
v-bind:value="
id: customer.id,
name_customer: customer.name_customer,
phone_customer: customer.phone_customer"
name="customers_id"
>
customer.name_customer
</option>
</select>
<div class="form-group">
<label>Name</label>
<input
type="text"
class="form-control"
id="text_name"
v-model="customers_id.name_customer"
/>
</div>
<div class="form-group">
<label>Téléphone</label>
<input
type="text"
class="form-control"
id="text_Tel"
v-model="customers_id.phone_customer"
/>
</div>
var app = new Vue(
el: '#app',
data:
customers_id: '',
customers: []
)
以下是如何在从下拉列表中进行选择后，填写输入字段，即从数据库中获取的数据。
您也可以查阅有关此主题的 vuejs 文档。 https://vuejs.org/v2/guide/forms.html#Select
【讨论】：
以上是关于Laravel：填写一个包含多个下拉列表的表单的主要内容，如果未能解决你的问题，请参考以下文章