Сначала он работает, но выбирает все варианты, а не соответствующие. Мой jQuery сразу выбирает значения для бейсбола и футбола. Может кто-нибудь помочь мне исправить это?
HTML
<div class="formControl">
<label>Sport</label>
<select id="sport">
<option value="">--Select--</option>
<option value="football">Football</option>
<option value="baseball">Baseball</option>
</select>
</div>
<div class="formControl">
<label>Equipment</label>
<select id="equipment">
<option value=""></option>
<option value="football">Helmet</option>
<option value="football">Pads</option>
<option value="baseball">Bat</option>
<option value="baseball">Gloves</option>
</select>
</div>
JQuery
$("#sport").change(function(){
$("#equipment").val($(this).val());
});
Один из способов сделать это - иметь 2 разных списка <select>
и показать активный.
HTML
<div class="formControl">
<label>Sport</label>
<select id="sport">
<option value="">--Select--</option>
<option value="football">Football</option>
<option value="baseball">Baseball</option>
</select>
</div>
<div class="formControl">
<div id="football" class="equipment">
<label>Equipment</label>
<select id="football-equipment">
<option value=""></option>
<option value="football">Helmet</option>
<option value="football">Pads</option>
</select>
</div>
<div id="baseball" class="equipment">
<label>Equipment</label>
<select id="baseball-equipment">
<option value=""></option>
<option value="baseball">Bat</option>
<option value="baseball">Gloves</option>
</select>
</div>
</div>
JQuery
$(function () {
$('.equipment').hide();
});
$("#sport").change(function () {
var val = $(this).val();
$('.equipment').hide();
$('#' + val).show();
});