基于下拉值的 JavaScript 触发器操作

JavaScript trigger action based on dropdown value

本文关键字：触发器 操作 JavaScript 于下拉      更新时间：2023-09-26

我正在尝试修改一些JavaScript，我必须修改它，以便当根据num值选择一个选项时，它将运行不同的操作。

以下是我目前的JavaScript的样子：

 jQuery(".frequency_new_selector").on("change", function() {
         jQuery('.frequency_new_label option:first-child').attr("disabled", "disabled");
         jQuery(".frequency_num").val(jQuery(".frequency_new_selector").find("option[value='" + jQuery(".frequency_new_selector").val() + "']").data("num"));
         jQuery(".frequency_type").val(jQuery(".frequency_new_selector").find("option[value='" + jQuery(".frequency_new_selector").val() + "']").data("type"));
         jQuery(".frequency_type_text").attr("value", jQuery(".frequency_type option[value='" + jQuery(".frequency_type").val() + "']").text());
         if (jQuery(".frequency_new_selector").val() !== null && $(".single-option-radio input:checked").length == $(".single-option-radio").length) {
             jQuery("#AddToCart").removeAttr("disabled");
         }
      });

我想添加一行，如下所示： 

if (jQuery(".frequency_new_selector").val() == 1 {
                 event.preventDefault();
                 $('.cd-popup').addClass('is-visible');
             }

我的 HTML 看起来像这样：

<div class="frequency_new_label" style="">
    <select class="frequency_new_selector">
        <option selected="selected" disabled="disabled">Please Select Shipping Interval</option>
        <option data-type="2" data-num="1" value="1">Weekly</option>
        <option data-type="3" data-num="1" value="2">Monthly</option>
    </select>
</div>
你的应该

按照你的方式工作...... 但是，我可能会稍微更改它，因为您正在进行不必要的jQuery调用，并且它们是非常昂贵的操作。

当您的更改回调被调用时this将被分配给 DOM 元素（下拉列表）。

$(".frequency_new_selector").on("change", function() {
  if (this.value === '1') {
    event.preventDefault();
    $('.cd-popup').addClass('is-visible');
  }
});

相关文章：