Hi sangyongjin88,
Check this example. Now please take its reference and correct your code.
Model
public class StoreModel
{
public List<Store> store_Invs { get; set; }
}
public class Store
{
public int Id { get; set; }
public string Barcode_num { get; set; }
public string Item_name { get; set; }
public string Reason { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
StoreModel model = new StoreModel();
model.store_Invs = new List<Store>()
{
new Store { Id=1, Barcode_num = "1", Item_name = "Item 1", Reason = "Reason 1" },
new Store { Id=2, Barcode_num = "2", Item_name = "Item 2", Reason = "Reason 2" },
new Store { Id=3, Barcode_num = "3", Item_name = "Item 3", Reason = "Reason 3" }
};
ViewBag.Reasonss = new SelectList(new List<string> { "Reason 1", "Reason 2", "Reason 3", "Reason 4", "Other" });
return View(model);
}
}
View
@model DropDownList_TextBox_MVC.Models.StoreModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
@using (Html.BeginForm())
{
<div class="form-horizontal container">
<hr />
<table id="submissionTable" class="table table-striped table-hover table-bordered" style="font-size: 14px;">
<thead>
<tr class="info" style="height:50px; width:80px; font-size:14px;">
<th style="width:5%; text-align:center">Barcode</th>
<th style="width:5%; text-align:center">Item Name</th>
<th>Reason</th>
</tr>
</thead>
<tbody>
@for (int i = 0; i < Model.store_Invs.Count; i++)
{
<tr>
@Html.HiddenFor(modelItem => modelItem.store_Invs[i].Id)
<td>
@Html.DisplayFor(modelItem => modelItem.store_Invs[i].Barcode_num)
</td>
<td>
@Html.DisplayFor(modelItem => modelItem.store_Invs[i].Item_name)
</td>
<td>
@Html.DropDownListFor(modelItem => modelItem.store_Invs[i].Reason,
(SelectList)ViewBag.Reasonss, "Select", new { @style = "width: 100px;", id = "Re" + i })
<br />Other:
<input type="text" id="txtOther" style="display:none" />
</td>
</tr>
}
</tbody>
</table>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Submit" class="btn btn-default" style="font-size:20px" />
</div>
</div>
</div>
}
<script type="text/javascript">
$(function () {
$("[id*=Re]").on("change", function () {
var txtOther = $(this).closest('tr').find('[id*=txtOther]');
if ($(this).val() == "Other") {
$(txtOther).show();
} else {
$(txtOther).hide();
}
});
});
</script>
</body>
</html>
Screenshot
