Bootstrap-不使用JS或jQuery-selectpicker为默认值

Question

我正在混合使用 HTML 和 C#，我想从 select 选择器设置默认的 selected 值。由于我加载了很多包含每个 select 选择器的数据，我需要在页面加载时直接 select 正确的选项，而不是之后，这会浪费我的时间（使用文档就绪，触发select显示的每个数据的离子）。

这是我目前正在尝试的：

<select id="PayStatus" data-key="@item.CandidateId" class="selectpicker gw-bs-small w-100">
  <option value="0" selected=@(item.PaymentStatus == 0 ? "selected" : "") data-content="<span class='badge badge-red-dark-500 text-white label-important'><i class='icon-cross mr-1'></i>InvoiceOpen</span>"></option>
  <option value="1" selected=@(item.PaymentStatus == 1 ? "selected" : "") data-content="<span class='badge badge-byline-300 text-green'>FreeDevelopment</span>">FreeDevelopment</option>
  <option value="2" selected=@(item.PaymentStatus == 2 ? "selected" : "") data-content="<span class='badge badge-green-500 text-white'><i class='icon-check mr-></i></span>
</select>

如您所见，我尝试让它与此一起工作：selected=@(item.PaymentStatus == 2 ? "selected" : "") 但值返回 true 但它不是 selected，它始终是第一个选项 select编辑

Answer 1

试试这个而不是空字符串，使用 null:

 <select id="PayStatus" data-key="@item.CandidateId" class="selectpicker gw-bs-small w-100">
     <option value="0" selected=@(item.PaymentStatus == 0 ? "selected" : null) data-content="<span class='badge badge-red-dark-500 text-white label-important'><i class='icon-cross mr-1'></i>InvoiceOpen</span>"></option>
     <option value="1" selected=@(item.PaymentStatus == 1 ? "selected" : null) data-content="<span class='badge badge-byline-300 text-green'>FreeDevelopment</span>">FreeDevelopment</option>
     <option value="2" selected=@(item.PaymentStatus == 2 ? "selected" : null) data-content="<span class='badge badge-green-500 text-white'><i class='icon-check mr-1'></i>InvoicePaid</span>">InvoicePaid</option>
  </select>

Answer 2

那是因为您只需要 selected 而不是 selected="selected" 或 selected="true" 在您的 <option> 中实际选中它。你应该试试：

 <select id="PayStatus" data-key="@item.CandidateId" class="selectpicker gw-bs-small w-100">
     <option value="0" @(item.PaymentStatus == 0 ? "selected" : "") data-content="<span class='badge badge-red-dark-500 text-white label-important'><i class='icon-cross mr-1'></i>InvoiceOpen</span>"></option>
     <option value="1" @(item.PaymentStatus == 1 ? "selected" : "") data-content="<span class='badge badge-byline-300 text-green'>FreeDevelopment</span>">FreeDevelopment</option>
     <option value="2" @(item.PaymentStatus == 2 ? "selected" : "") data-content="<span class='badge badge-green-500 text-white'><i class='icon-check mr-1'></i>InvoicePaid</span>">InvoicePaid</option>
  </select>

Bootstrap-不使用JS或jQuery-selectpicker为默认值

Bootstrap-selectpicker to a default value without using JS or jQuery

html

c#

asp.net

asp.net-mvc

razor