使用兩個.change（）兩個不同的選擇

Question

http://jsfiddle.net/xv1ozszv

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

<center> 
    <h3 id="h3A"> </h3> 
    <h4> vs </h4> 
    <h3 id="h3B"> </h3> 
    <h4> 60 - 70 </h4> 
</center> 
<div class="12u$"> 
    <div class="select-wrapper"> 
     <select name="teamA" id="teamA" style="max-width:30%;"> 
      <option value="">- TeamA -</option> 
      <option value="1">Kansas</option> 
      <option value="1">Oklahoma</option> 
      <option value=4>Texas</option> 
      <option value="1">Notre Dame</option> 
     </select> 
    </div> 
</div> 
<div class="12u$"> 
    <div class="select-wrapper"> 
     <select name="teamB" id="teamB" 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> 

$("#teamA") 
    .change(function() { 
     var str = ""; 
     $("select option:selected").each(function() { 
      str = $(this).text() + " "; // var of what im changing 
     }); 
     $("#h3A").text(str); // target of what to change 
    }) 
    .change(); // make it happen   
$("#teamB") 
    .change(function() { 
     var str = ""; 
     $("select option:selected").each(function() { 
      str = $(this).text() + " "; // var of what im changing 
     }); 
     $("#h3B").text(str); // target of what to change 
    }) 
    .change(); // make it happen 

我想提出兩個選擇：獨立地改變兩個不同的文本，我遇到了一些麻煩。看看我的代碼小提琴。我認爲我通過使用身份證的方式走上了正軌，但他們仍然沒有完全獨立行事。謝謝

Answer 1

您似乎正在將更改偵聽器正確綁定到每個select元素。但是，觸發的事件正在尋找$("select option:selected")，它將與兩個選擇列表中的選定選項相匹配。

Answer 2

我改變了一下代碼，以顯示你可以做什麼。

http://jsfiddle.net/xv1ozszv/2/

$('#A').change(function(){ 

添加onChange事件的ID比在同一時間將它添加到所有的選擇更好。

Answer 3

我建議使用data attributes將<select>元素與它們各自的<h3>元素相關聯。

在我的示例中，我已經給出了每個<select>元素的data-team屬性以匹配其團隊字母（「A」或「B」）。然後，當更改<select>元素時，我使用其團隊屬性的值來選擇具有相同團隊屬性的<h3>元素。

此外，在這種情況下，請注意this keyword指的是發起change事件的<select>元素。例如，$(':selected',this).text()引用已更改的<select>元素的選定選項。

$("select").on('change', function() { 
 
    
 
    var team = $(this).data('team'), 
 
     str = $(':selected',this).text(), 
 
     $out = $("h3[data-team=" + team + "]"); 
 
    
 
    $out.text(str); 
 
    
 
}).change();

h3, 
 
h4 { 
 
    margin: 0; 
 
} 
 
select { 
 
    display: block; 
 
    max-width: 30%; 
 
    margin: 0 auto; 
 
} 
 
#headings { 
 
    text-align: center; 
 
    margin:0 0 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="headings"> 
 
    <h3 data-team="A">A</h3> 
 
    <h4>vs</h4> 
 
    <h3 data-team="B">B</h3> 
 
    <h4>60 - 70</h4> 
 
</div> 
 

 
<select data-team="A"> 
 
    <option>- TeamA -</option> 
 
    <option>Kansas</option> 
 
    <option>Oklahoma</option> 
 
    <option>Texas</option> 
 
    <option>Notre Dame</option> 
 
</select> 
 
<select data-team="B"> 
 
    <option>- TeamB -</option> 
 
    <option>Kansas</option> 
 
    <option>Oklahoma</option> 
 
    <option>Texas</option> 
 
    <option>Notre Dame</option> 
 
</select>

Answer 4

的問題是，即使你的內部事件處理程序，您使用的太曖昧了一個選擇的。

此外，有些位可以更有效地完成。我已經清理了：

$("#teamA").change(function() { 
 
    $("#h3A").text($(this).children("option:selected").text()); // target of what to change 
 
}).change(); // make it happen  
 
$("#teamB").change(function() { 
 
    $("#h3B").text($(this).children("option:selected").text()); // target of what to change 
 
}).change(); // make it happen

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<center> 
 
    <h3 id="h3A"> </h3> 
 
    <h4> vs </h4> 
 
    <h3 id="h3B"> </h3> 
 
    <h4> 60 - 70 </h4> 
 
</center> 
 
<div class="12u$"> 
 
    <div class="select-wrapper"> 
 
    <select name="teamA" id="teamA" style="max-width:30%;"> 
 
     <option value="">- TeamA -</option> 
 
     <option value="1">Kansas</option> 
 
     <option value="2">Oklahoma</option> 
 
     <option value="3">Texas</option> 
 
     <option value="4">Notre Dame</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class="12u$"> 
 
    <div class="select-wrapper"> 
 
    <select name="teamB" id="teamB" style="max-width:30%;"> 
 
     <option value="">- TeamB -</option> 
 
     <option value="1">Kansas</option> 
 
     <option value="2">Oklahoma</option> 
 
     <option value="3">Texas</option> 
 
     <option value="4">Notre Dame</option> 
 
    </select> 
 
    </div> 
 
</div>