記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p 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">なるほど、<br><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select asp-for=&quot;PaymentTypeId&quot; asp-items=&quot;ViewBag.PaymentTypeId&quot;&gt;</code> の場合、<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">value</code> は&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TypeId</code> ですが、登録前に選択された&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TypeName</code> を取得したいということですね。</p><p 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;">ASP.NET Core MVC では、<strong style="font-weight: 700;">サーバー側</strong>でも**クライアント側（JavaScript）**でも取得可能です。<br>以下に両方の方法を示します。</p><h2 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.&nbsp;<strong style="font-weight: 700;">クライアント側（JavaScriptで取得）</strong></h2><p 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;">登録（POST）前にブラウザで選択中の表示テキスト（<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TypeName</code>）を取得できます。</p><pre data-priority="2" 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 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);">Html</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;">&lt;<span style="color: rgb(34, 134, 58);">select</span> <span style="color: rgb(0, 92, 197);">asp-for</span>=<span style="color: rgb(3, 47, 98);">&quot;PaymentTypeId&quot;</span> <span style="color: rgb(0, 92, 197);">class</span>=<span style="color: rgb(3, 47, 98);">&quot;form-control&quot;</span> <span style="color: rgb(0, 92, 197);">asp-items</span>=<span style="color: rgb(3, 47, 98);">&quot;ViewBag.PaymentTypeId&quot;</span> <span style="color: rgb(0, 92, 197);">id</span>=<span style="color: rgb(3, 47, 98);">&quot;PaymentTypeId&quot;</span>&gt;&lt;/<span style="color: rgb(34, 134, 58);">select</span>&gt;

&lt;<span style="color: rgb(34, 134, 58);">script</span>&gt;
<span style="color: rgb(215, 58, 73);">document</span>.<span style="color: rgb(111, 66, 193);">getElementById</span>(<span style="color: rgb(3, 47, 98);">&quot;PaymentTypeId&quot;</span>).<span style="color: rgb(111, 66, 193);">addEventListener</span>(<span style="color: rgb(3, 47, 98);">&quot;change&quot;</span>, <span style="color: rgb(215, 58, 73);">function</span> () {
    <span style="color: rgb(106, 115, 125);">// 選択中の option の表示テキスト（TypeName）</span>
    <span style="color: rgb(215, 58, 73);">let</span> selectedText = <span style="color: rgb(215, 58, 73);">this</span>.options[<span style="color: rgb(215, 58, 73);">this</span>.selectedIndex].text;
    <span style="color: rgb(215, 58, 73);">let</span> selectedValue = <span style="color: rgb(215, 58, 73);">this</span>.value; <span style="color: rgb(106, 115, 125);">// TypeId</span>

    <span style="color: rgb(215, 58, 73);">console</span>.<span style="color: rgb(111, 66, 193);">log</span>(<span style="color: rgb(3, 47, 98);">&quot;選択された TypeId:&quot;</span>, selectedValue);
    <span style="color: rgb(215, 58, 73);">console</span>.<span style="color: rgb(111, 66, 193);">log</span>(<span style="color: rgb(3, 47, 98);">&quot;選択された TypeName:&quot;</span>, selectedText);
});
&lt;/<span style="color: rgb(34, 134, 58);">script</span>&gt;
</code></pre><p 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;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TypeName</code> を取得して別の hidden フィールドに入れることも可能です。</p><h2 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.&nbsp;<strong style="font-weight: 700;">サーバー側（Controllerで取得）</strong></h2><p 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;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">PaymentTypeId</code> しか送られませんが、DBやリストから&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TypeName</code> を引けます。</p><pre data-priority="2" 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 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;">[<span style="color: rgb(0, 92, 197);">HttpPost</span>]
<span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">Create</span>(MyViewModel model)
{
    <span style="color: rgb(106, 115, 125);">// model.PaymentTypeId が送信された値</span>
    <span style="color: rgb(215, 58, 73);">var</span> typeName = _context.PaymentTypes
        .Where(t =&gt; t.TypeId == model.PaymentTypeId)
        .Select(t =&gt; t.TypeName)
        .FirstOrDefault();

    <span style="color: rgb(106, 115, 125);">// typeName を使って処理</span>
    ...
}
</code></pre><h2 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.&nbsp;<strong style="font-weight: 700;">Hiddenフィールドで一緒に送信する方法</strong></h2><p 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;">JavaScriptで選択時に&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TypeName</code> を hidden にセットして送信する方法です。</p><pre data-priority="2" 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 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);">Html</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;">&lt;<span style="color: rgb(34, 134, 58);">select</span> <span style="color: rgb(0, 92, 197);">asp-for</span>=<span style="color: rgb(3, 47, 98);">&quot;PaymentTypeId&quot;</span> <span style="color: rgb(0, 92, 197);">class</span>=<span style="color: rgb(3, 47, 98);">&quot;form-control&quot;</span> <span style="color: rgb(0, 92, 197);">asp-items</span>=<span style="color: rgb(3, 47, 98);">&quot;ViewBag.PaymentTypeId&quot;</span> <span style="color: rgb(0, 92, 197);">id</span>=<span style="color: rgb(3, 47, 98);">&quot;PaymentTypeId&quot;</span>&gt;&lt;/<span style="color: rgb(34, 134, 58);">select</span>&gt;
&lt;<span style="color: rgb(34, 134, 58);">input</span> <span style="color: rgb(0, 92, 197);">type</span>=<span style="color: rgb(3, 47, 98);">&quot;hidden&quot;</span> <span style="color: rgb(0, 92, 197);">name</span>=<span style="color: rgb(3, 47, 98);">&quot;PaymentTypeName&quot;</span> <span style="color: rgb(0, 92, 197);">id</span>=<span style="color: rgb(3, 47, 98);">&quot;PaymentTypeName&quot;</span> /&gt;

&lt;<span style="color: rgb(34, 134, 58);">script</span>&gt;
<span style="color: rgb(215, 58, 73);">document</span>.<span style="color: rgb(111, 66, 193);">getElementById</span>(<span style="color: rgb(3, 47, 98);">&quot;PaymentTypeId&quot;</span>).<span style="color: rgb(111, 66, 193);">addEventListener</span>(<span style="color: rgb(3, 47, 98);">&quot;change&quot;</span>, <span style="color: rgb(215, 58, 73);">function</span> () {
    <span style="color: rgb(215, 58, 73);">document</span>.<span style="color: rgb(111, 66, 193);">getElementById</span>(<span style="color: rgb(3, 47, 98);">&quot;PaymentTypeName&quot;</span>).value = <span style="color: rgb(215, 58, 73);">this</span>.options[<span style="color: rgb(215, 58, 73);">this</span>.selectedIndex].text;
});
&lt;/<span style="color: rgb(34, 134, 58);">script</span>&gt;
</code></pre><p 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;">Controller 側では&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">PaymentTypeName</code> も受け取れます。</p><p 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;<strong style="font-weight: 700;">まとめ</strong></p><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; 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;"><strong style="font-weight: 700;">画面上で即取得</strong> &rarr; JavaScriptで&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">selectedIndex</code> の&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">.text</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;"><strong style="font-weight: 700;">サーバーで取得</strong> &rarr;&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">PaymentTypeId</code> からDBやリストで&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">TypeName</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;"><strong style="font-weight: 700;">両方送信</strong> &rarr; hidden フィールドにセットしてPOST</li></ul><p 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;">もし「登録前に画面上で TypeName を別の項目に表示したい」なら、<br>JavaScriptでの方法（1）が一番シンプルです。</p><p 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;">必要であれば、<strong style="font-weight: 700;">選択したTypeNameを即座に別の入力欄やラベルに反映するサンプル</strong>も作れますが、それも載せますか？<br>そうすれば登録前にユーザーにも確認できます。</p><p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a></p>

添付画像

画像を変更

Back to List

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