jQuery - отображать противоположное (инвертированное выделение) значение выпадающего списка

Я хочу отобразить Противоположное значение выбранного списка.

Если я выберу " Team A " из выпадающего списка "Batting", то команда по боулингу должна быть " Team B " и наоборот.

HTML

Batting: 
<select class="battingTeam">
  <option>-- Select Team --</option>
  <option>Team A</option>
  <option>Team B</option>
</select>

<div id="bowlingTeam"></div>

JQuery

$(document).ready(function(){
    $(".battingTeam").change(function(){
        $("#bowlingTeam").html( 'Bowling:' + this.options[this.selectedIndex].textContent);
     });                      
});


FIDDLE

3 ответа

$(document).ready(function(){
    $(".battingTeam").change(function(){
        var batTeam = $(this).val();
        var bowlTeam = ( batTeam == "Team B" )?"Team A":"Team B";
        $('#bowlingTeam').html("Bowling:" +bowlTeam );
    });
});

Проверьте скрипку: http://jsfiddle.net/hoja/24427kda/1/

Добавьте класс к опциям, которые teams тогда вам не нужно знать конкретные значения

<option class="team">Team A</option>
<option  class="team">Team B</option>

JS

 $(".battingTeam").change(function () {       
    $("#bowlingTeam").html('Bowling:' + $(this).find('.team:not(:selected)').text());
});

DEMO

Пытаться

$(document).ready(function () {
    $(".battingTeam").change(function () {
        var value = (this.selectedIndex == 0) ? 0 : (this.selectedIndex == 1) ? 2 : 1;
        (value == 0) ? $("#bowlingTeam").hide() : $("#bowlingTeam").show().html('Bowling:' + this.options[value].textContent);

    });
});

DEMO

Другие вопросы по тегам