如何在具有不同ID的多选元素上使用相同的JavaScript函数 [英] How to use the same JavaScript Function on Multiple Select elements with different ID's

问题描述

我有这些JavaScript函数需要用于4个select元素，每个元素使用一个唯一的ID。
$ b $ 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; 
} 
}）; 
}）; 
  

第二个脚本

 函数select_options（）{
 var textBlocks = [
'< font class =font-color-grey>零售价：< s> ; $ 45.00< /s>< / font>< br>销售价格：< font class =font-color-red> $ 35.00< / font>'，
'< font class < font-color-grey>>零售价格：< 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>零售价：< s> $ 90.00< /s>< / font>< br>< font class =salesprice>销售价格：< font class =font-color-red-bold> $ 70.00< / font> < / font>'，
'< font class =font-color-grey>零售价：< s> $ 180.00< / s>< / font>< br>< font class =salesprice>销售价格：< font class =font-color-red-bold> $ 120.00< ; /字体>< /字体>]; 
 
 document.getElementById（'getquantity'）。onchange = function（）{
 var ind = document.getElementById（'getquantity'）。selectedIndex; 
 document.getElementById（'showprice'）。innerHTML =''+ textBlocks [ind]; 
 
 
 
 
 
 $ b 
  1st选择下拉菜单（使用id = showprice和id =getquantity） 
 < form id ='product_qty'name =product_qty > 
< img class =checkoutsrc =images / lean_green_usEN.jpgusemap =＃lean_green_usEN> 
< map name =lean_green_usEN> 
< area shape =rectcoords =168,140,​​341,189class =addToCart> 
< / map> 
< span class =showpriceid =showprice>< / span> 
< div class =qty>数量：
< select class =getquantityid =getquantity> 
 < 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.jpgusemap =＃burn> 
< map name =burn> 
< area shape =rectcoords =168,140,​​341,189class =addToCart> 
< / map> 
< span class =showpriceid =showprice2>< / span> 
< div class =qty>数量：
< select class =getquantityid =getquantity2> 
 < 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> 
  
  3选择下拉菜单（使用id =showprice3和id =getquantity3）  
 
 
 < form id ='energy_qty'name =energy_qty> 
< img src =images / energy_mind_usEN.jpgusemap =＃energy> 
< map name =energy> 
< area shape =rectcoords =168,140,​​341,189class =addToCart> 
< / map> 
< span class =showpriceid =showprice3>< / span> 
< div class =qty>数量：
< select class =getquantityid =getquantity3> 
 < 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.jpgusemap =＃lean> 
< map name =lean> 
< area shape =rectcoords =168,140,​​341,189class =addToCart> 
< / map> 
< span class =showpriceid =showprice4>< / span> 
< div class =qty>数量：
< select class =getquantityid =getquantity4> 
 < 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> 
  
 更新的脚本  
 
 （$pre>  $（document）.ready（function（）{
 $（form）。on（click，.addToCart，function（e）{ 
 // e.delegateTarget是addToCart后代被点击的表单
 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>零售价：< s> $ 45.00< / s> < / font>< br>销售价格：< font class =font-color-red> $ 35.00< / font>'，
'< font class =font-color-grey >零售价：< s> $ 45.00< / s>< / font>< br>< font class =salesprice> Sales Pr ice：< font class =font-color-red-bold> $ 35.00< / font>< / font>'，
'< font class =font-color-grey>零售价：< s> $ 90.00< / s>< / font>< br>< font class =salesprice>销售价格：< font class =font-color-red-bold> ; $ 70.00< / font>< / font>'，
'< font class =font-color-grey>零售价：< s> $ 180.00< / s>< / font> ;< br>< font class =salesprice>销售价格：< font class =font-color-red-bold> $ 120.00< / font>< / font>']; （'change'，'.getquantity'，function（e）{
 var ind = this.selectedIndex; 
 $（e。
 $ b $（'form'）。 （。showprice）。html（textBlocks [ind]）; 
}）; 
}）; 
  

更新选择下拉列表

 < form id ='burn_qty'name =burn_qtyautocomplete =off> 
< div class =gadcontainer> < img src =images / burn_control_usEN.jpgwidth =350height =225border =0usemap =＃burn> 
< map name =burn> 
< area shape =rectcoords =168,140,​​341,189class =addToCart> 
< / map> 
< span class =showpriceid =showprice2>< font class =font-color-grey>零售价：< s> $ 45.00< / s>< / font> ;<峰; br> 
销售价格：< font class =font-color-red> $ 35.00< / font>< / span> 
< div class =qty>数量：
< select class =getquantityid =getquantity2> 
 < 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> 
  

但是现在我的hightlight效果不起作用。

  //  - > 
 
<！[CDATA [
 $（window）.load（function（）{
 $（'。getquantity'）。change（function（）{
 $（'。salesprice'）。effect（highlight，{}，3000）; 
}）
}）; //]]> 
  

---

编辑

如@JLRishe所示，我在上面的脚本中包含了突出显示效果。这样做使高光效果再次正常工作。我还将jQuery和用户界面更新为稳定版本。

以下是更新的脚本

cdn jQuery和UI

 < script src =// code.jquery.com/jquery-1.11.0 .min.js>< /脚本> 
< script src =// code.jquery.com/ui/1.9.2/jquery-ui.min.js\"></script> 
  

包含高亮效果的更新脚本<​​/ b>

  $（document）.ready（function（）{
 $（form）。on（click，.addToCart，function （e）{
 // e.delegateTarget是addToCart后裔被点击的表单
 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>零售价：< s> $ 45.00< / s>< / font>< br>销售价格：< font class =font-color-red> $ 35.00< / font>'，
'< font零售价格：< s> $ 45.00< / s>< / font>< br>< font class = salesprice>销售价格：< font class =font-color-red-bold> $ 35.00< / font>< / font>'，
'< font class =font-零售价：< s> $ 90.00< / s>< / font>< br>< font class =salesprice>销售价格：< font class =font-color零售价格：$ 180.00< / font> $ gt; $ 70.00< / font>< / font>'，
'< font class =font-color-grey> >< / font>< br>< font class =salesprice>销售价格：< font class =font-color-red-bold> $ 120.00< / font>< / font> ;']; （'change'，'.getquantity'，function（e）{
 var ind = this.selectedIndex; 
 $（e。
 $ b $（'form'）。 （。highlightprice，{}，3000）; $ b $（'。salesprice'）.find b 
}）; 
}）; 
  

解决方案

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

  $（document）.ready（function（）{
 $（form）。on（click ，.addToCart，函数（e）{
 // e.delegateTarget是addToCart后代被点击的表单
 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 >零售价：< s> $ 45.00< / s>< / font>< br>销售价格：< font class =font-color-red> $ 35.00< / font>'， 
'< font class =font- < / font>零售价：< s> $ 45.00< / s>< / font>< br>< font class =salesprice>销售价格：< font class =font-color零售价格：$ 90.00< / font> $ 35.00< / font>< / font>'，
'< font class =font-color-grey> >< / font>< br>< font class =salesprice>销售价格：< font class =font-color-red-bold> $ 70.00< / font>< / font> ;'，
'< font class =font-color-grey>零售价：< s> $ 180.00< / s>< / font>< br>< font class = salesprice>销售价格：< font class =font-color-red-bold> $ 120.00< / font>< / font>']; （'change'，'.getquantity'，function（e）{
 var ind = this.selectedIndex; 
 $（e。
 $ b $（'form'）。 （。highlightprice，{}，3000）; $ b $（'。salesprice'）.find b}）; 
}）; 
  

工作小提琴（有点修改为在没有图像的情况下在JSFiddle中工作）：

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

我应该指出你所有的表单都没有关闭 div 元素，我建议关闭你的 img 和区域标签，但这在HTML中并不是必需的。

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

});
});

解决方案

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.

这篇关于如何在具有不同ID的多选元素上使用相同的JavaScript函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！