У меня есть три раскрывающихся значения, как показано ниже
Как видите, если значение одного раскрывающегося списка не равно «Все», мне нужно установить другие значения раскрывающегося списка на «Все». Что происходит сейчас, если я изменяю значение первого раскрывающегося списка, другие значения устанавливаются правильно, но когда я изменяю второе раскрывающееся меню, первое раскрывающееся меню не устанавливается на «Все». Работает в обратном порядке. После установки всех значений мне нужно отправить переменные в качестве параметров для вызова функции.
var selActuals = $('#actuals_dropdown').val();
var selBudget = $('#budget_dropdown').val();
var selYTD = $('#ytd_dropdown').val();
if (selActuals != "All") {
$('#budget_dropdown').val("All");
$('#ytd_dropdown').val("All");
} else if (selBudget != "All") {
$('#actuals_dropdown').val("All");
$('#ytd_dropdown').val("All");
} else if (selYTD != "All") {
$('#actuals_dropdown').val("All");
$('#budget_dropdown').val("All");
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "region-block">
<div class = "lbl">Yearly Actuals:</div>
<div class = "ftr">
<select id = "actuals_dropdown" name = "actuals_dropdown" style = "width: 100%;">
<option value = "All">Sort By</option>
<option value = "DESC">DESC</option>
<option value = "ASC">ASC</option>
</select>
</div>
</div>
<div class = "region-block">
<div class = "lbl">Yearly Budget:</div>
<div class = "ftr">
<select id = "budget_dropdown" name = "budget_dropdown" style = "width: 100%;">
<option value = "All">Sort By</option>
<option value = "DESC">DESC</option>
<option value = "ASC">ASC</option>
</select>
</div>
</div>
<div class = "region-block">
<div class = "lbl">YTD:</div>
<div class = "ftr">
<select id = "ytd_dropdown" name = "ytd_dropdown" style = "width: 100%;">
<option value = "All">Sort By</option>
<option value = "DESC">DESC</option>
<option value = "ASC">ASC</option>
</select>
</div>
</div>
Фактически, весь код выполняется в функции, которая вызывает каждое изменение раскрывающегося списка.
А, я вижу, вы изменили пост после моего комментария.
если я правильно понимаю, можно и так; Дайте всем входным данным select имя класса, например, 'drp-filter'
$(function() {
$('.drp-filter').change(function() {
var value = $(this).val();
if (value != 'All') {
$('.drp-filter').val('All')
$(this).val(value);
}
});
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "region-block">
<div class = "lbl">Yearly Actuals:</div>
<div class = "ftr">
<select id = "actuals_dropdown" name = "actuals_dropdown" style = "width: 100%;" class='drp-filter'>
<option value = "All">Sort By</option>
<option value = "DESC">DESC</option>
<option value = "ASC">ASC</option>
</select>
</div>
</div>
<div class = "region-block">
<div class = "lbl">Yearly Budget:</div>
<div class = "ftr">
<select id = "budget_dropdown" name = "budget_dropdown" style = "width: 100%;" class='drp-filter'>
<option value = "All">Sort By</option>
<option value = "DESC">DESC</option>
<option value = "ASC">ASC</option>
</select>
</div>
</div>
<div class = "region-block">
<div class = "lbl">YTD:</div>
<div class = "ftr">
<select id = "ytd_dropdown" name = "ytd_dropdown" style = "width: 100%;" class='drp-filter'>
<option value = "All">Sort By</option>
<option value = "DESC">DESC</option>
<option value = "ASC">ASC</option>
</select>
</div>
</div>
Ваш javascript работает только при первой загрузке страницы. Вы понимаете, что после этого не выполняется javascript?
$(document).ready()
запускается один раз, когда страница готова.