How to make multiple selects in html with jquery .change()

Question

<center>
    <h3> A </h3>
    <h4> vs </h4>
    <h3> B </h3>
    <h4> 60 - 70 </h4>
</center>

<div class="12u$">
    <div class="select-wrapper">
        <select name="teamA" id="A" style="max-width:30%;">
            <option value="">- TeamA -</option>
            <option value="1">Kansas</option>
            <option value="1">Oklahoma</option>
            <option value="1">Texas</option>
            <option value="1">Notre Dame</option>
        </select>
    </div>
</div>
<div class="12u$">
    <div class="select-wrapper">
        <select name="teamB" id="B" style="max-width:30%;">
            <option value="">- TeamB -</option>
            <option value="1">Kansas</option>
            <option value="1">Oklahoma</option>
            <option value="1">Texas</option>
            <option value="1">Notre Dame</option>
        </select>
    </div>
</div>
<script>
    $("select")
        .change(function() {
            var str = "Team A";
            $("select option:selected").each(function() {
                str = $(this).text() + " ";
            });
            $("h3").text(str);
        })
        .change();
</script>

This will work for one selector but how do I make another script that changes a separate select.

You have an extra < in your code before the <script> tag — Tech Savant
– Tech Savant, Commented Mar 11, 2016 at 8:38
So I have two selects and I want them to change two different texts, however this script can only point to one select currently. I have made another select and how to do I change the script so I can change them independently? — bobsim21
– bobsim21, Commented Mar 11, 2016 at 8:39
So based on the value of the option selected in the first dropdown, you want to change the value of the second dropdown to something? — Tech Savant
– Tech Savant, Commented Mar 11, 2016 at 8:40

Roboroads · Accepted Answer · 2016-03-11 09:03:33Z

1

You can use the ID of your selects, (btw, id A and B are a bit.. short..)

$("#A").change();
$("#B").change();

Or check what ID the select has:

$("select").change(function(){
    if(this.id == "A")
    {
        // Its the first one that changed
    }
    else if(this.id == "B")
    {
        // Its the second one that changed
    }
});

edited Mar 11, 2016 at 9:03

answered Mar 11, 2016 at 8:58

Roboroads

1,7571 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Me.Name · Accepted Answer · 2016-03-11 09:13:02Z

1

If the headers have id's that correspond to the select's id, you can use the select's id to obtain the corresponding headers. e.g. with header ids 'hA' and 'hB':

$( "select" ).change(function () {
    $('#h' + this.id).text(this.options[this.selectedIndex].text);
});

Fiddle

answered Mar 11, 2016 at 9:13

Me.Name

12.6k3 gold badges34 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to make multiple selects in html with jquery .change()

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related