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>

这适用于一个选择器，但如何创建另一个更改单独选择的脚本。

Answer 1

您可以使用您选择的ID，（顺便说一句，ID A和B有点......简短..）

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

或者检查选择的ID：

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

Answer 2

如果标题的ID与select的ID相对应，您可以使用select的ID来获取相应的标题。例如标题ID＆＃39; hA＆＃39;和＆＃39; hB＆＃39;：

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

Fiddle

如何使用jquery在.html中进行多次选择.change（）

2 个答案: