如何使用 JavaScript 在 JSP 的下拉列表中自动选择值以查看填充的数据

Question

>我在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">&times;</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>

这是我的 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">&times;</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 -->

Answer 1

实际上，我真的不知道你在找什么。但也许这段代码会有所帮助。

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>