Question

http://jsfiddle.net/xv1ozszv

{{1}}

我正在尝试制作两个选项，分别更改两个不同的文本并遇到一些麻烦。看看我的代码的小提琴。我认为我使用id是正确的，但他们仍然没有完全独立行动。感谢

Answer 1

您似乎正在将更改侦听器正确绑定到每个select元素。但是，触发的事件正在寻找$( "select option:selected" )，它将匹配两个选择列表中的所选选项。

Answer 2

我建议您使用data attributes将<select>元素与其各自的<h3>元素相关联。

在下面的示例中，我为每个<select>元素提供了data-team属性以匹配其团队信函（＆＃34; A＆＃34;或＆＃34; B＆＃34 ）。然后，当更改<select>元素时，我使用其团队属性的值来选择具有相同团队属性的<h3>元素。

此外，在此上下文中，请注意this keyword引用已触发<select>事件的change元素。例如，$(':selected',this).text()引用已更改的<select>元素的选定选项。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

我稍微更改了代码以显示你可以做什么。

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

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

将onChange事件添加到ID比将其同时添加到所有选择更好。

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>

使用两个.change（）进行两个不同的选择

4 个答案: