Question

我有这些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 =＆＃34; showprice＆＃34;和id =＆＃34; getquantity＆＃34;）

  <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 =＆＃34; showprice2＆＃34;和id =＆＃34; getquantity2＆＃34;）

    <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 =＆＃34; showprice3＆＃34;和id =＆＃34; getquantity3＆＃34;）

    <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 =＆＃34; showprice4＆＃34;和id =＆＃34; getquantity4＆＃34;）

    <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 I＆＃39; m使用的两个引用。

<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 = [
    '<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>'];

$('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>
    <span class="showprice" id="showprice2"><font class="font-color-grey">Retail Price: <s>$45.00</s></font><br>
    Sales Price: <font class="font-color-red">$35.00</font></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>
    </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 = [
    '<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>'];

$('form').on('change', '.getquantity', function (e) {
    var ind = this.selectedIndex;
    $(e.delegateTarget).find(".showprice").html(textBlocks[ind]);

$('.salesprice').effect("highlight", {},  3000);

});
});

Answer 1

您应该可以执行以下操作：

$(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 = [
        '<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>'];

    $('form').on('change', '.getquantity', function (e) {
        var ind = this.selectedIndex;
        $(e.delegateTarget).find(".showprice").html(textBlocks[ind]);

        $('.salesprice').effect("highlight", {},  3000);
    });
});

工作小提琴（有点修改后可以在没有图像的JSFiddle中工作）：

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

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

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

1 个答案: