javascript - 如何使用javascript在jsp的下拉列表中自动选择值以查看填充的数据
问题描述
我用html制作了一个表单，如果用户提交表单，那么存储在表单中的值将存储在数据库中。如果用户单击编辑然后在模型中打开该填写的表单，则我放置一个选项编辑，但如何在 html 中填写下拉列表。
这是我的表单代码
<!-- Large Modal -->
<div id="additem" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content ">
<div class="modal-header pd-x-20">
<h6 class="modal-title">Message Preview</h6>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="additem" enctype="multipart/form-data">
<div class="modal-body pd-20">
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Name</label>
<div class="col-md-9">
<input type="hidden" value="${shopkeeper.sk_id}" name="sk_id">
<input type="text" class="form-control"
placeholder="Enter item name here..." name="name">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Type</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="itemtype">
<option value="" disabled selected>Item Type</option>
<option value="Grocery">Grocery</option>
<option value="Bread and Dairy">Bread and Dairy</option>
<option value="Fruits">Fruits</option>
<option value="Beverages">Beverages</option>
<option value="Sweets">Sweets</option>
<option value="Packed Snack">Packed Snack</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Brand</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item brand here..." name="brand">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Price</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="price">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Price with
Discount</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="offerprice">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Image</label>
<div class="col-md-9">
<div class="form-group files color mb-lg-0">
<input type="file" class="file" class="form-control1"
name="image" accept="image/*">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Product
Availability</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="availability">
<option value="" disabled selected>Product
Availability</option>
<option value="In Stock">In Stock</option>
<option value="Out of Stock">Out of Stock</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Description</label>
<div class="col-md-9">
<textarea class="form-control" rows="3"
placeholder="Enter item description here..." name="description"></textarea>
</div>
</div>
</div>
<button type="submit"
class="btn btn-primary btn-right m-b-5 m-t-20" id="Button">Submit</button>
</form>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add Item</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->
这是我单击编辑时加载数据的按钮代码，此代码将执行
<button class="adtocart"
onclick="loaddata(${listitem.item_id},'${listitem.name}','${listitem.brand}','${listitem.price}','${listitem.description}','${listitem.availability}','${listitem.itemtype}',${listitem.offerprice});"
data-toggle="modal" data-target="#edititem">
<i class="fa fa-edit"></i>
</button>
这是我通过按钮发送handel 数据的javascript 函数。这就是我如何填充文本框的值
function loaddata(item_id,name,brand,price,description,availability,itemtype,offerprice)
{
alert("Hello! I am an alert box!");
document.f1.item_id.value=item_id;
document.f1.name.value=name;
document.f1.brand.value=brand;
document.f1.price.value=price;
document.f1.description.value=description;
}
下面的代码用于显示填充表单以编辑数据
<!-- Edit Item Model Start -->
<!-- Large Modal -->
<div id="edititem" class="modal fade">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content ">
<div class="modal-header pd-x-20">
<h6 class="modal-title">Edit Item</h6>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form method="post" action="edititem" enctype="multipart/form-data"
name="f1">
<div class="modal-body pd-20">
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Name</label>
<div class="col-md-9">
<input type="hidden" value="${shopkeeper.sk_id}" name="sk_id">
<input type="hidden" id="item_id" name="item_id"> <input
type="text" class="form-control"
placeholder="Enter item name here..." name="name">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Type</label>
<div class="col-md-9">
<select class="btn btn-primary m-b-5 m-t-5" name="itemtype">
<option value="" disabled selected>Item Type</option>
<option value="Grocery">Grocery</option>
<option value="Bread and Dairy">Bread and Dairy</option>
<option value="Fruits">Fruits</option>
<option value="Beverages">Beverages</option>
<option value="Sweets">Sweets</option>
<option value="Packed Snack">Packed Snack</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Brand</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item brand here..." name="brand">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Price</label>
<div class="col-md-9">
<input type="text" class="form-control"
placeholder="Enter item price here..." name="price">
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Image</label>
<div class="col-md-9">
<div class="form-group files color mb-lg-0">
<input type="file" class="file" class="form-control1"
name="image" accept="image/*">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">Item Description</label>
<div class="col-md-9">
<textarea class="form-control" rows="3"
placeholder="Enter item description here..." name="description"
id="description"></textarea>
</div>
</div>
</div>
<button type="submit"
class="btn btn-primary btn-right m-b-5 m-t-20" id="Button">Submit</button>
</form>
<!-- modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-primary">Add Item</button>
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- modal-dialog -->
</div>
<!-- modal -->
<!-- Edit Item Model End -->
解决方案
其实，我真的不知道你在找什么。但也许这段代码会有所帮助。
function selectOption(value)
{
// get the select
const selectTest = document.f1.itemtype;
// the loop runs over all options
for (let i = 0; i < selectTest.options.length; i++)
{
if( value === selectTest.options[i].value)
{
// if the "value" is an possible option
// this option is selected and the loop is aborted.
selectTest.options[i].selected = true;
break;
}
}
}
// call the function with the value of the second option
selectOption('test2');<form name="f1">
<select name="itemtype" >
<option value="test1">TEST 1</option>
<option value="test2">TEST 2</option>
<option value="test3">TEST 3</option>
<option value="test4">TEST 4</option>
<option value="test5">TEST 5</option>
<option value="test6">TEST 6</option>
</select>
</form>推荐阅读
- javascript - 在不刷新页面的情况下动态更改值
- python - 如何合并这两个正则表达式？
- java - 尝试部署 Presto 并且当我尝试访问控制台时页面不会加载
- django - 被应用程序崩溃并试图重新加载它，但是得到新的奇怪的 Django Requests 错误
- django - 是否可以使用详细视图显示多个对象？
- django - 如何减少 Django 包大小以在 AWS lambda 中使用？
- github - GitHub SSH麻烦....添加了密钥...仍然不起作用
- configuration - 如何阻止 Steam 自动播放视频并让 Steam 记住默认音量？
- c# - Grpc.Core.RpcException“无法反序列化响应消息..”或“InvalidOperationException：长度不匹配”
- outlook - Office Js：Outlook 插件对话 api 在 Outlook 客户端中不起作用