Question

我有一个订购网站，我不能编辑HTML结构（CMS）。

对于某些产品，它们有多种数量，例如250,500等。

目前我们有一个文本输入，用户输入他们需要的数量。但是，我们希望将它们限制为仅选择可用的数量。因此，我们希望选择下拉列表，而不是自由类型的文本输入。

在我们的页面上，我们有一张数量及其价格的表格，例如（PROD201是自动分配到ID中的产品代码

）

<table summary="Product discounts" class="nc discounts">
<thead>
  <tr>
    <th id="q-prod201" axis="quantity" scope="row">Quantity</th>
    <th id="q0-prod201" axis="250" scope="col">250</th>
    <th id="q1-prod201" axis="500" scope="col">500</th>
  </tr>
</thead>
<tbody>
  <tr class="price-row">
    <th id="p-prod201" axis="discount-price" scope="row">Unit Price</th>
    <td headers="q0-prod201">£0.00</td>
    <td headers="q1-prod201">£0.00</td>
  </tr>
</tbody>
</table>

这是当前的文字输入......

<input type="text" name="basket:_new:quantity" class="qty quantity" id="quantity-prod201" value="250" size="3" />

我想尝试提取表格中的数量值，并使用这些值将文本输入转换为选择。

我可以根据范围=＆＃34; col＆＃34;来定位数量值。属性（因为它似乎是唯一标识符）...

$("#product .discounts thead th[scope='col']").map(function() {
  var $row = $(this);
  return { 
    scope: $row.attr('scope'), 
    text: $row.text()
  };
}).get();

但我不确定如何将其转换为选择并替换现有输入。

非常感谢任何帮助

Answer 1

您必须创建一个select元素并添加选项：

var select = $("<select>");
$("#product .discounts thead th[scope='col']").each(function (index, element) {
    select.append($("<option>" + $(element).text() + "</option>"));
});

这是Fiddle example

将文本输入转换为带有表中值的选择

1 个答案: