CODEWITHSUNDEEP
javascriptjqueryhtml
SMweb
SMweb

Reputation: 3

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

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?

Upvotes: 0

Views: 121

Answers (2)

Vibhor Dube
Vibhor Dube

Reputation: 5051

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

Upvotes: 1

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

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

Upvotes: 1

Related Questions