How to use the same JavaScript Function on Multiple Select elements with different ID's

问题

I have these JavaScript functions that I need to use for 4 select elements that each use a unique ID.

1) How can I use these functions to make all 4 select drop downs function right?

Here are the 2 JavaScript functions and 4 html select drop downs for reference.

1st Script

$(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;
        }
    });
});

2nd Script

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];
    }
}

1st Select drop down (uses id="showprice" and 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>

2nd Select drop down (uses id="showprice2" and 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>

3rd Select drop down (uses id="showprice3" and 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>

4th Select drop down (uses id="showprice4" and 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>

Edit

Updated code

On my site when I select the drop down the alert pops up. It should only pop up when nothing is selected and the button is clicked.

These are the two references to jquery I'm using.

<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>

Updated 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]);
});
});

Updated select drop down

<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>

Edit

The edit code above works now because I updated to latest jQuery

<script src="//code.jquery.com/jquery-2.1.1-beta1.min.js"></script>

But now my hightlight effect isn't working.

//-->

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

Edit

I included the highlight effect in the above script as suggested by @JLRishe. Doing that enabled the highlight effect to work normally again. I also updated jQuery and the UI to stable versions.

Here is the updated script

cdn jQuery and 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>

Updated Script with included highlight effect

$(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);

});
});

回答1:

You should be able to do something like the following:

$(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);
    });
});

Working fiddle (a bit modified to work in JSFiddle without your images):

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

I should point out that all of your forms have unclosed div elements, and I would recommend closing your img and area tags, though that's not strictly necessary in HTML.

来源：https://stackoverflow.com/questions/23102578/how-to-use-the-same-javascript-function-on-multiple-select-elements-with-differe

标签

javascript

jquery

html