How to get javascript function work only in div by class?

Question

Have a HTML / javascript :

<section class="on">
    <select id="comboA" onchange="getComboA(this)">
        <option value="[xfvalue_monthprice1]">100</option>
        <option value="[xfvalue_monthprice2]">200</option>
        <option value="[xfvalue_monthprice3]">300</option>
        <option value="[xfvalue_monthprice5]">400</option>
    </select>

    <div id="prdiv">
        <p id="prid"></p>
    </div>
</section>

<script>
    function getComboA(sel) {
        var value = sel.value;  
        document.getElementById("prid").innerHTML = value;
    }
</script>

Sections are more than 2. Class "on" of the section is dinamyc (on / off). How can I force the function to work only in section with "on" class?

Anoop Joshi P · Accepted Answer · 2015-06-16T12:14:59.290

1

Since you have tagged the question with jquery, You can use jquery to bind the change event only elements with a specific class name.

As the class name changes dynamically, you need to use delegation as well

$(document).on("change", "section.on select", function() {
    $("#prid").html($(this).val());
});

edited Jun 16 '15 at 12:14

answered Jun 16 '15 at 12:00

Anoop Joshi P

25,373
8
32
53

works only for the 1-st section. I guess it's because of the main div (before section, which also has class "on"). So, how can we get not ".on select" , but "section.on select" . Thanks in advance! – SMweb Jun 16 '15 at 12:13
works well. but also I have to select not the "#prid" , but ".on #prid" . Now it works, thanks a lot! – SMweb Jun 16 '15 at 12:31
Mark it as anwer, if it helped you :) – Anoop Joshi P Jun 16 '15 at 12:32

score 1 · Answer 2 · answered Jun 16 '15 at 12:32

1

I guess you need a javascript solution. Here is my try:

HTML:

<section class="on">
    <select id="comboA">
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="300">300</option>
        <option value="400">400</option>
    </select>
</section>
<section class="off">
    <select id="comboB">
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="300">300</option>
        <option value="400">400</option>
    </select>
</section>
<div id="prdiv"><p id="prid"></p> </div>

JS:

var selCombo = document.querySelector(".on select");
selCombo.addEventListener("change", function() {
    var value = this.value;  
    document.getElementById("prid").innerHTML = value;
});

FIDDLE

answered Jun 16 '15 at 12:32

Vibhor Dube

4,173
1
22
32

also works, but only for the 1-st section. Need ".on #prid" . See upper, solved with jquery. Thanks! – SMweb Jun 16 '15 at 12:49
It is possible to achieve it through 'querySelector', but its [browser support](https://developer.mozilla.org/en-US/docs/Web/CSS/:scope#Browser_compatibility) is limited. Also, [see this](http://stackoverflow.com/questions/6481612/queryselector-search-immediate-children) for your reference for selecting the immediate child. – Vibhor Dube Jun 16 '15 at 12:53
If you notice, I've separated `#prdiv` from both the sections and kept it at the end. And as per requirement, the script only runs for the section with `class="on"` – Vibhor Dube Jun 16 '15 at 12:55

How to get javascript function work only in div by class?

2 Answers2