javascript - 如何在具有不同 ID 的多个 Select 元素上使用相同的 JavaScript 函数-6ren

javascript - 如何在具有不同 ID 的多个 Select 元素上使用相同的 JavaScript 函数

转载作者：行者123 更新时间：2023-11-30 17:30:48

28

4

我有这些 JavaScript 函数，我需要将它们用于 4 个选择元素，每个元素都使用唯一的 ID。

1) 我怎样才能使用这些函数使所有 4 个选择下拉菜单功能正确？

这里有 2 个 JavaScript 函数和 4 个 html 选择下拉菜单供引用。

第一个脚本

$(document).ready(function () {
    $(".addToCart").on("click", function () {
        var quant = $("#getquantity");
        console.log(quant.val());
        if (!quant.val()) {
            alert("Select Quantity!");
        } else {
            var productCode = quant.val();
            window.location.href = "url.com/2.php?a=" + productCode + "&d=" + id + "&c=US&durl=" + idname;
        }
    });
});

第二个脚本

function select_options() {
    var textBlocks = [
        '<font class="font-color-grey">Retail Price: <s>$45.00</s></font><br>Sales Price: <font class="font-color-red">$35.00</font>',
        '<font class="font-color-grey">Retail Price: <s>$45.00</s></font><br><font class="salesprice">Sales Price: <font class="font-color-red-bold">$35.00</font></font>',
        '<font class="font-color-grey">Retail Price: <s>$90.00</s></font><br><font class="salesprice">Sales Price: <font class="font-color-red-bold">$70.00</font></font>',
        '<font class="font-color-grey">Retail Price: <s>$180.00</s></font><br><font class="salesprice">Sales Price: <font class="font-color-red-bold">$120.00</font></font>'];

    document.getElementById('getquantity').onchange = function () {
        var ind = document.getElementById('getquantity').selectedIndex;
        document.getElementById('showprice').innerHTML = ' ' + textBlocks[ind];
    }
}

第一个选择下拉菜单(使用 id="showprice"和 id="getquantity")

  <form id='product_qty' name="product_qty">
  <img class="checkout" src="images/lean_green_usEN.jpg" usemap="#lean_green_usEN">
  <map name="lean_green_usEN">
    <area shape="rect" coords="168,140,341,189" class="addToCart">
  </map>
  <span class="showprice" id="showprice"></span>
  <div class="qty"> Qty:
    <select class="getquantity" id="getquantity">
      <option value="" selected="selected">select quantity</option>
      <option value="413">(1) box $35 ea</option>
      <option value="414">(2) boxes $35 ea</option>
      <option value="415">(4) boxes $30 ea</option>
    </select>
  </form>

第二个选择下拉菜单(使用 id="showprice2"和 id="getquantity2")

    <form id='burn_qty' name="burn_qty">
    <img src="images/burn_control_usEN.jpg" usemap="#burn">
    <map name="burn">
      <area shape="rect" coords="168,140,341,189" class="addToCart">
    </map>
    <span class="showprice" id="showprice2"></span>
    <div class="qty"> Qty:
      <select class="getquantity" id="getquantity2">
        <option value="" selected="selected">select quantity</option>
        <option value="410">(1) box $35 ea</option>
        <option value="405">(2) boxes $35 ea</option>
        <option value="406">(4) boxes $30 ea</option>
      </select>
    </form>

第三个选择下拉菜单(使用 id="showprice3"和 id="getquantity3")

    <form id='energy_qty' name="energy_qty">
    <img src="images/energy_mind_usEN.jpg" usemap="#energy">
    <map name="energy">
      <area shape="rect" coords="168,140,341,189" class="addToCart">
    </map>
    <span class="showprice" id="showprice3"></span>
    <div class="qty"> Qty:
      <select class="getquantity" id="getquantity3">
        <option value="" selected="selected">select quantity</option>
        <option value="409">(1) box $35 ea</option>
        <option value="407">(2) boxes $35 ea</option>
        <option value="408">(4) boxes $30 ea</option>
      </select>
    </form>

第 4 个选择下拉菜单(使用 id="showprice4"和 id="getquantity4")

    <form id='lean_qty' name="lean_qty">
    <img src="images/lean_green_usEN.jpg" usemap="#lean">
    <map name="lean">
      <area shape="rect" coords="168,140,341,189" class="addToCart">
    </map>
    <span class="showprice" id="showprice4"></span>
    <div class="qty"> Qty:
      <select class="getquantity" id="getquantity4">
        <option value="" selected="selected">select quantity</option>
        <option value="413">(1) box $35 ea</option>
        <option value="414">(2) boxes $35 ea</option>
        <option value="415">(4) boxes $30 ea</option>
      </select>
    </form>

编辑

更新代码

在我的网站上，当我选择下拉菜单时弹出警报。它应该仅在未选择任何内容且单击按钮时弹出。

这是对我正在使用的 jquery 的两个引用。

<script src="//code.jquery.com/jquery-1.5.2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

更新脚本

$(document).ready(function () { $("form").on("click", ".addToCart", function (e) { // e.delegateTarget is the form whose addToCart descendant was clicked var quantVal = $(e.delegateTarget).find(".getquantity").val(); console.log(quantVal); if (!quantVal) { alert("Select Quantity!"); } else { var productCode = quantVal; window.location.href = "customer_appkit2.php?a=" + productCode + "&d=" + id + "&c=US&durl=" + idname; } }); var textBlocks = [ 'Retail Price: <s>$45.00</s> Sales Price: $35.00', 'Retail Price: <s>$45.00</s> Sales Price: $35.00', 'Retail Price: <s>$90.00</s> Sales Price: $70.00', 'Retail Price: <s>$180.00</s> Sales Price: $120.00']; $('form').on('change', '.getquantity', function (e) { var ind = this.selectedIndex; $(e.delegateTarget).find(".showprice").html(textBlocks[ind]); }); });
更新的选择下拉列表

<form id='burn_qty' name="burn_qty" autocomplete="off"> <div class="gadcontainer"> <img src="images/burn_control_usEN.jpg" width="350" height="225" border="0" usemap="#burn"> <map name="burn"> <area shape="rect" coords="168,140,341,189" class="addToCart"> </map> Retail Price: <s>$45.00</s> Sales Price: $35.00 <div class="qty"> Qty: <select class="getquantity" id="getquantity2"> <option value="" selected="selected">select quantity</option> <option value="410">(1) box $35 ea</option> <option value="405">(2) boxes $35 ea</option> <option value="406">(4) boxes $30 ea</option> </select> </div> </div> </form>

编辑
上面的编辑代码现在可以工作了，因为我更新到了最新的 jQuery

<script src="//code.jquery.com/jquery-2.1.1-beta1.min.js"></script>
但是现在我的高光效果不工作了。

//--> //<![CDATA[ $(window).load(function(){ $('.getquantity').change(function(){ $('.salesprice').effect("highlight", {}, 3000); }) });//]]>

编辑
我按照@JLRishe 的建议在上面的脚本中加入了高亮效果。这样做可以使高光效果再次正常工作。我还将 jQuery 和 UI 更新为稳定版本。
这是更新后的脚本
cdn jQuery 和 UI

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
包含高亮效果的更新脚本

$(document).ready(function () { $("form").on("click", ".addToCart", function (e) { // e.delegateTarget is the form whose addToCart descendant was clicked var quantVal = $(e.delegateTarget).find(".getquantity").val(); console.log(quantVal); if (!quantVal) { alert("Select Quantity!"); } else { var productCode = quantVal; window.location.href = "url.com/2.php?a=" + productCode + "&d=" + id + "&c=US&durl=" + idname; } }); var textBlocks = [ 'Retail Price: <s>$45.00</s> Sales Price: $35.00', 'Retail Price: <s>$45.00</s> Sales Price: $35.00', 'Retail Price: <s>$90.00</s> Sales Price: $70.00', 'Retail Price: <s>$180.00</s> Sales Price: $120.00']; $('form').on('change', '.getquantity', function (e) { var ind = this.selectedIndex; $(e.delegateTarget).find(".showprice").html(textBlocks[ind]); $('.salesprice').effect("highlight", {}, 3000); }); });

最佳答案

您应该能够执行以下操作:

$(document).ready(function () { $("form").on("click", ".addToCart", function (e) { // e.delegateTarget is the form whose addToCart descendant was clicked var quantVal = $(e.delegateTarget).find(".getquantity").val(); console.log(quantVal); if (!quantVal) { alert("Select Quantity!"); } else { var productCode = quantVal; window.location.href = "url.com/2.php?a=" + productCode + "&d=" + id + "&c=US&durl=" + idname; } }); var textBlocks = [ 'Retail Price: <s>$45.00</s> Sales Price: $35.00', 'Retail Price: <s>$45.00</s> Sales Price: $35.00', 'Retail Price: <s>$90.00</s> Sales Price: $70.00', 'Retail Price: <s>$180.00</s> Sales Price: $120.00']; $('form').on('change', '.getquantity', function (e) { var ind = this.selectedIndex; $(e.delegateTarget).find(".showprice").html(textBlocks[ind]); $('.salesprice').effect("highlight", {}, 3000); }); });

工作 fiddle (稍微修改以在没有图像的情况下在 JSFiddle 中工作):

http://jsfiddle.net/DDNLe/3/

我应该指出，您所有的表单都有未闭合的 div 元素，但我建议您关闭您的 img 和 area 标签这在 HTML 中并不是绝对必要的。

关于javascript - 如何在具有不同 ID 的多个 Select 元素上使用相同的 JavaScript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23102578/

28

4

0

文章推荐： c# - .NET Core 注册具有不同数量参数的原始泛型

文章推荐： c - 编译 openMP 和数学库的问题

文章推荐： c# - 当 regex101 匹配时，RegEx C# 不匹配

文章推荐： C float 小数不被内存

javascript - react JSX : selecting "selected" on selected
我试图通过用空格填充文本来创建下拉列表中的列效果，如下例所示: [Aux1+1] [*] [Aux1+1] [@Tn=PP] [Main] [*] [Main A
select - JPA - MAX of COUNT 或 SELECT FROM SELECT
我为 MySQL 编写了以下查询: SELECT subquery.t1_column1, subquery.t2_id, MAX(subquery.val) FROM ( S
jquery - 为什么我们用 select 标签编写 .attr ('selected' ,'selected' )
为什么我们要用 select 标签来编写.attr('selected','selected') 例如: $('#countryList option').filter(function () {
select - "selected"选项上的标签在选择具有FormControlname时不起作用
Lokalizacja: Gdańsk Rzeszów Wrocław 不知道发生了什么，但在那种情况下没有选择的选项，我必须从列表中选择一些东西。当我从选
jquery - removeAttr ("selected") 和 .attr ('selected' ,'selected' ) 无法正常工作
我的表单中有两个选择字段。第一个是单选，另一个是多选。现在我想做的是根据单选中所选的选项，使用给定的数据选择多选中的选项。为此，我在单选更改时触发 ajax 请求: $.ajax({ type
select - Firefox 5 在页面刷新时不使用 select ="selected"值，保留旧值
我在 Firefox 5 中发现了一个奇怪的错误(我现在无法访问 4)。但是，我认为它可能在 Firefox 4 中工作，因为我刚买了一台新电脑，而且我不记得以前见过这个错误。我有几个选择框。所选值
MySQL: select * from table 和 select * from (select* from table) 的区别
此 SQL 有何不同: 第一个: select * from table_1 a join table_2 b on a.id = b.acc_id 第二个: select * f
html - HTML <选项> : selected VS selected ="selected" 的最佳实践
预选的最佳做法是什么？在？根据不同的网站，两者都有效。但是哪个更好呢？最兼容？ Foo Bar 最佳答案如果您正在编写 XHTML，则 selected="selected" 是必需的。如
javascript - Angular JS : "Select All" options of "multi-select select box"
我使用 Angular JS 创建了一个多选选择框:下面是相同的代码: JS: $scope.foobars = [{ 'foobar_id': 'foobar01', 'name':
select - 在列上使用 defaultValue 属性(但不是
我正在编写一个小脚本来测试表单在提交之前是否已被更改。所以我可以使用普通输入(文本、文本区域等): if(element.defaultValue != element.value) { al
javascript - 将选项从 - 选项 select 属性被破坏了吗？
我正在尝试为 Prototype 编写一个插件，用户在其中单击下拉菜单并将其替换为多选元素。我快完成了。在用户选择他们想要显示的内容并将表单提交到同一页面之前，一切都很好。我正在使用 PHP 来使用
Mongodb select with condition is selected result must in sub select query
你如何在 MongoDB 中进行嵌套选择，类似于 SELECT id FROM table1 WHERE id IN (SELECT id FROM table2) 最佳答案 MongoDB 尚不具备
Angular 2 : Select dropdown not selecting option despite "selected" attribute
我有以下用于选择下拉列表的代码: {{unit.Text}} UnitOfMeasurements 数组中的每一项看起来像这样: Selected: false Text: "lb" Va
Use [ngValue] and [selected] in select tag(在选择标记中使用[ngValue]和[selected])
我正在尝试使用[选定]和[ngValue]来设置表单中包含对象的选择标记的默认值。但出于某种原因，它们似乎无法相提并论。。示例代码：。这段代码最终只显示空白作为缺省值。如果删除[ngValue]，它就

首页

博学

6Ren·AI

商城

javascript - 如何在具有不同 ID 的多个 Select 元素上使用相同的 JavaScript 函数