Question

我正在使用支付网关API，我获取了一组数据。有一个下拉（选择选项）供用户使用信用卡/借记卡或其他（例如贝宝）方法选择付款方式。我想将所有方法分为两组，分别为“信用卡/借记卡”和“其他方法” 使用php（因为API在php中）我可以构建一个下拉列表：

<select id="cardname" name="ptype">
<option>Select Payment Method</option>
<option data-id="a" value="1">Visa</option>
<option data-id="a" value="2">American Express</option>
<option data-id="a" value="3">MasterCard</option>
<option data-id="a" value="114">Visa Debit</option>
<option data-id="a" value="119">Mastercard Debit</option>
<option data-id="a" value="122">Visa Electron</option>
<option data-id="a" value="125">JCB</option>
<option data-id="b" value="841">WebMoney</option>
<option data-id="b" value="843">Skrill (Moneybookers)</option>
</select>

我需要快速指导以构建分组下拉框。

Answer 1

您可以使用<optgroup>对选项进行分组的一种方法。 e.g：

<select id="cardname" name="ptype">
  <option>Select Payment Method</option>
  <optgroup label="Credit Cards">
    <option data-id="a" value="1">Visa</option>
    <option data-id="a" value="2">American Express</option>
    <option data-id="a" value="3">MasterCard</option>
    <option data-id="a" value="114">Visa Debit</option>
    <option data-id="a" value="119">Mastercard Debit</option>
    <option data-id="a" value="122">Visa Electron</option>
    <option data-id="a" value="125">JCB</option>
  </optgroup>
  <optgroup label="Other methods">
    <option data-id="b" value="841">WebMoney</option>
    <option data-id="b" value="843">Skrill (Moneybookers)</option>
  </optgroup>
</select>

这是你在找什么？希望有所帮助。

使用jQuery动态地将选项分组到opt-group

1 个答案: