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());
});
Пытаться
$(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);
});
});