Question

我尝试使用JQuery将.change()事件附加到下拉选择字段。代码如下：

<div id="productVariants" class="group">
    <label for="product-option">Rental Options :</label>
    <select name="id" id="productSelect" style="visibility:hidden;width:400px;">
        <option disabled="disabled">3 Day Rental ($5.68 per day) ($17.05) - SOLD OUT</option>
        <option value="801110989">7 Day Rental ($4.41 per day) ($30.85)</option>
        <option value="894325197">10 Day Rental ($3.71 per day) ($37.12)</option>
        <option value="894454745">14 Day Rental ($3.32 per day) ($46.44)</option>
    </select>
</div><!-- productVariants -->

<script type="text/javascript">
    $("select")
      .change(function () {
          var str = "";
          $("select option:selected").each(function () {
              alert('changed');
          });
      })
      .change();
</script>

该事件似乎仅在页面加载时触发，而不是在我更改所选项目时触发。有没有人知道如何在每次更改选择框时触发此事件？

Answer 1

试试这个：

$("#productSelect").change(function () {
    var str = "";
    // To fetch value of selected option
    str = $(this).val();

    alert('changed');

});

我删除了一些不必要的代码。

Answer 2

您需要将JS块移至[$(document).ready()][1]事件内。这将确保页面（DOM）已准备就绪并已使用<select>控件注册该事件。这样每次选择发生变化时都会触发。

我还建议使用实际控件$("#productSelect")的选择器，而不是为每个选择控件触发该事件的代码。这可能是您所遵循的逻辑，但可能是控制特定的，因此您可以捕获选择数据以进行后续AJAX调用或其他任何需要。

<script type="text/javascript">
    $(document).ready(function () {
        $("#productSelect").change(function () {
            //Populate variable with the 'option value'      
            var selectValue = $(this).val();
            alert('select changed value selected is: ' + selectValue);

        });
    });

</script>

JQuery change（）动态加载事件问题

2 个答案: