記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p data-bm="12" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">なるほど、状況を整理するとこうですね。<ul data-bm="13" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">ASP.NET Core MVC の CreateView において<ul style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">親&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> &rarr;&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">PaymentTypeId</code>（テーブル:&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">PaymentTypes</code>）</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">子&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> &rarr;&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">PaymentMethodId</code>（テーブル:&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">PaymentMethod</code>）</li></ul></li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">親の&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> に&nbsp;新規項目を追加できるようにしたい（追加後は即座に選択状態にする）</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">子の&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> も同様に&nbsp;新規項目を追加できるようにしたい</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">両方とも&nbsp;DB保存が必要</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">親子関係は&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">PaymentType</code> 1 : N&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">PaymentMethod</code></li></ul><p data-bm="14" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">これは典型的な&nbsp;親子ドロップダウン + Ajax 新規追加 のパターンです。 以下のような構成で実装できます。<h2 data-bm="15" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">1. モデル定義</h2><pre data-priority="2" data-bm="16" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div data-bm="26" style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(248, 244, 241);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Csharp</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px roboto, helvetica, sans-serif; background-color: rgb(217, 223, 251); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">// 親
public class PaymentType
{
 public int Id { get; set; }
 public string Name { get; set; }
 public ICollection&lt;PaymentMethod&gt; PaymentMethods { get; set; }
}

// 子
public class PaymentMethod
{
 public int Id { get; set; }
 public string Name { get; set; }

 public int PaymentTypeId { get; set; }
 public PaymentType PaymentType { get; set; }
}
</code></pre><h2 data-bm="17" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">2. コントローラ</h2><pre data-priority="2" data-bm="18" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div data-bm="27" style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(248, 244, 241);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Csharp</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px roboto, helvetica, sans-serif; background-color: rgb(217, 223, 251); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">public class PaymentsController : Controller
{
 private readonly AppDbContext _context;

 public PaymentsController(AppDbContext context)
 {
 _context = context;
 }

 // Create GET
 public IActionResult Create()
 {
 ViewData[&quot;PaymentTypeId&quot;] = new SelectList(_context.PaymentTypes, &quot;Id&quot;, &quot;Name&quot;);
 ViewData[&quot;PaymentMethodId&quot;] = new SelectList(Enumerable.Empty&lt;SelectListItem&gt;());
 return View();
 }

 // Ajax: 親追加
 [HttpPost]
 public IActionResult AddPaymentType(string name)
 {
 if (string.IsNullOrWhiteSpace(name))
 return BadRequest(&quot;Name is required&quot;);

 var type = new PaymentType { Name = name };
 _context.PaymentTypes.Add(type);
 _context.SaveChanges();

 return Json(new { id = type.Id, name = type.Name });
 }

 // Ajax: 子追加
 [HttpPost]
 public IActionResult AddPaymentMethod(int paymentTypeId, string name)
 {
 if (string.IsNullOrWhiteSpace(name))
 return BadRequest(&quot;Name is required&quot;);

 var method = new PaymentMethod { Name = name, PaymentTypeId = paymentTypeId };
 _context.PaymentMethods.Add(method);
 _context.SaveChanges();

 return Json(new { id = method.Id, name = method.Name });
 }

 // Ajax: 子リスト取得
 [HttpGet]
 public IActionResult GetPaymentMethods(int paymentTypeId)
 {
 var methods = _context.PaymentMethods
 .Where(m =&gt; m.PaymentTypeId == paymentTypeId)
 .Select(m =&gt; new { id = m.Id, name = m.Name })
 .ToList();

 return Json(methods);
 }
}
</code></pre><h2 data-bm="19" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">3. Create.cshtml</h2><pre data-priority="2" data-bm="20" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div data-bm="28" style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(248, 244, 241);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Cshtml</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px roboto, helvetica, sans-serif; background-color: rgb(217, 223, 251); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">@model YourNamespace.Models.Payment

&lt;div class=&quot;form-group&quot;&gt;
 &lt;label asp-for=&quot;PaymentTypeId&quot;&gt;&lt;/label&gt;
 &lt;div class=&quot;input-group&quot;&gt;
 &lt;select asp-for=&quot;PaymentTypeId&quot; class=&quot;form-control&quot;
 asp-items=&quot;@(ViewData[&quot;PaymentTypeId&quot;] as SelectList)&quot;&gt;&lt;/select&gt;
 &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot; id=&quot;btnAddType&quot;&gt;＋&lt;/button&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;form-group&quot;&gt;
 &lt;label asp-for=&quot;PaymentMethodId&quot;&gt;&lt;/label&gt;
 &lt;div class=&quot;input-group&quot;&gt;
 &lt;select asp-for=&quot;PaymentMethodId&quot; class=&quot;form-control&quot;
 asp-items=&quot;@(ViewData[&quot;PaymentMethodId&quot;] as SelectList)&quot;&gt;&lt;/select&gt;
 &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot; id=&quot;btnAddMethod&quot;&gt;＋&lt;/button&gt;
 &lt;/div&gt;
&lt;/div&gt;

@section Scripts {
&lt;script&gt;
$(function () {
 // 親変更時に子リスト更新
 $(&#39;#PaymentTypeId&#39;).change(function () {
 var typeId = $(this).val();
 $.getJSON(&#39;/Payments/GetPaymentMethods&#39;, { paymentTypeId: typeId }, function (data) {
 var $method = $(&#39;#PaymentMethodId&#39;);
 $method.empty();
 $.each(data, function (i, item) {
 $method.append($(&#39;&lt;option&gt;&#39;, { value: item.id, text: item.name }));
 });
 });
 });

 // 親追加
 $(&#39;#btnAddType&#39;).click(function () {
 var name = prompt(&quot;新しい支払タイプ名を入力してください:&quot;);
 if (!name) return;
 $.post(&#39;/Payments/AddPaymentType&#39;, { name: name }, function (data) {
 $(&#39;#PaymentTypeId&#39;).append($(&#39;&lt;option&gt;&#39;, { value: data.id, text: data.name, selected: true }));
 $(&#39;#PaymentTypeId&#39;).trigger(&#39;change&#39;); // 子リスト更新
 });
 });

 // 子追加
 $(&#39;#btnAddMethod&#39;).click(function () {
 var typeId = $(&#39;#PaymentTypeId&#39;).val();
 if (!typeId) { alert(&quot;先に支払タイプを選択してください&quot;); return; }
 var name = prompt(&quot;新しい支払方法名を入力してください:&quot;);
 if (!name) return;
 $.post(&#39;/Payments/AddPaymentMethod&#39;, { paymentTypeId: typeId, name: name }, function (data) {
 $(&#39;#PaymentMethodId&#39;).append($(&#39;&lt;option&gt;&#39;, { value: data.id, text: data.name, selected: true }));
 });
 });
});
&lt;/script&gt;
}
</code></pre><h2 data-bm="21" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">4. 実装のポイント</h2><ul data-bm="22" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">Ajaxで即DB保存 &rarr; 追加後に&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> に&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">append</code> して&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">selected</code> にする</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">親変更時に子リストを再取得（<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">GetPaymentMethods</code>）</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">入力は&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">prompt</code> で簡易実装していますが、モーダルフォームにすればUIが改善します</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">バリデーションはサーバー側でも必須（空文字や重複チェックなど）</li></ul><p data-bm="23" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">✅ この方法なら、<ul data-bm="24" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">親&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> に新規項目追加 &rarr; 即選択状態</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">子&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> に新規項目追加 &rarr; 即選択状態</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">両方ともDBに保存され、親子関係も維持 が可能です。</li></ul><p data-bm="25" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">もし希望があれば、このコードを&nbsp;Bootstrapモーダル対応版 にして、 入力フォームで追加できるように改良したサンプルも作れますが、 それも作りますか？ そうすれば UX がかなり向上します。Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a>

添付画像

画像を変更

Back to List

//検索文：Editor内でHTMLコードをコピーさせる