Question

这里我使用选择选项菜单来选择1,2,3到10之类的值然后它会自动乘以我的设定值，如1000并显示在我的div中这是我的代码

<table width="100%" border="0">
  <tr>
    <td style="text-align:left; text-indent:10px;padding:5px;" width="39%"><b>Listing Type </b></td>
    <td width="15%"><b>No. of listings </b></td>
    <td width="18%"><b>Price Per Listings </b></td>
    <td width="15%"><b>Listing Duration</b> </td>
    <td width="13%"><b>Total Price </b></td>
  </tr>
  <tr>
    <td style="font-weight:600;text-align:left; padding:0px 10px;" height="39">Successghar fast listing (should be consumed within 90 days of buying) </td>
    <td><select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
    </select></td>
    <td>Rs. 1099 </td>
    <td>90 Days </td>
    <td> Price show here </td>
  </tr>
</table>

Answer 1

此解决方案将使用JS变量填充表行。它还将初步设定每个列表的价格＆＃34;基于该变量。这是一个有效的plunkr。

HTML：

<table width="100%" border="0">
  <tr>
    <td style="text-align:left; text-indent:10px;padding:5px;" width="39%"><b>Listing Type </b>
    </td>
    <td width="15%"><b>No. of listings </b>
    </td>
    <td width="18%"><b>Price Per Listings </b>
    </td>
    <td width="15%"><b>Listing Duration</b> 
    </td>
    <td width="13%"><b>Total Price </b>
    </td>
  </tr>
  <tr>
    <td style="font-weight:600;text-align:left; padding:0px 10px;" height="39">Successghar fast listing (should be consumed within 90 days of buying)</td>
    <td>
      <select id="num-listings">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </td>
    <td id="price-per-listing"></td>
    <td>90 Days</td>
    <td id="total-price">Price show here</td>
  </tr>
</table>

JavaScript的：

$(document).ready(function() {
  var pricePerListing = 1099.0;
  var numListingsSelect = $('#num-listings');
  var pricePerListingCell = $('#price-per-listing');

  pricePerListingCell.html("Rs. " + pricePerListing);

  function updateTotalPrice() {
    numListings = numListingsSelect.val();
    $('#total-price').html(pricePerListing * numListings);
  }

  numListingsSelect.change(function() {
    updateTotalPrice();
  });

  updateTotalPrice();
});

当我从select选项中选择一个值时，它乘以我的设定值并显示在div上

1 个答案: