javascript — опция автоматического выбора раскрывающегося списка другого раскрывающегося списка
У меня есть три раскрывающихся списка, но мне нужно автоматически выбрать 2 и 3 в зависимости от выбора в 1. Для этого я использую атрибут уровня данных (потому что значения я буду использовать для других целей).
<label>Dimensiones</label>
<span class="wpcf7-form-control-wrap dimensiones">
<!-- Dropdown Master or 1 -->
<select name="dimensiones" id="dimensiones" class="wpcf7-select quoteform">
<option value="" selected="selected" data-level="0">Seleccione una opción</option>
<option value="20 x 60 x 45" data-level="1">20 x 60 x 45</option>
<option value="30 x 10 x 50" data-level="2">30 x 10 x 50</option>
<option value="10 x 10 x 30" data-level="3">10 x 10 x 30</option>
</select>
</span>
<label>Peso</label><br>
<span class="wpcf7-form-control-wrap pesos">
<!-- Dropdown slave or 2 -->
<select name="pesos" id="pesos" class="wpcf7-select quoteform">
<option value="" selected="selected" data-level="0">Seleccione una opción</option>
<option value="400" data-level="1">400</option>
<option value="320" data-level="2">320</option>
<option value="100" data-level="3">100</option>
</select>
</span>
<label>Codigos</label><br>
<span class="wpcf7-form-control-wrap codigos">
<!-- Dropdown slave or 3 -->
<select name="codigos" id="codigos" class="wpcf7-select quoteform">
<option value="" selected="selected" data-level="0">Seleccione una opción</option>
<option value="A123" data-level="1">A123</option>
<option value="A263" data-level="2">A263</option>
<option value="A555" data-level="3">A555</option>
</select>
</span>
И этот фрагмент не работает
$("select[name=dimensiones], select[name=pesos], select[name=codigos]").change(function() {
var value = element.data('level');
$("select[name=dimensiones], select[name=pesos], select[name=codigos]").not(this).val(value);
});
Например:
В главном выпадающем меню у меня есть еда, в рабе 1 у меня есть напитки и в рабе 2 у меня есть десерт
Напитки и десерты будут выбираться в зависимости от еды. Если вы выберете первый вариант питания, вы автоматически выберете один вариант напитка и один вариант десерта.
Решение
В вашем случае вы можете получить выбранный вариант в JQuery с : выбранный селектор следующее: $(this).find(":selected"), Следовательно, код будет:
$("select[name=dimensiones], select[name=pesos], select[name=codigos]").change(function() {
var level = $(this).find(":selected").data('level');
$("select[name=dimensiones], select[name=pesos], select[name=codigos]").not(this).each(function() {
$(this).find(':selected').prop('selected', false);
$(this).find("[data-level='" + level + "']").prop('selected', true);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Dimensiones</label>
<span class="wpcf7-form-control-wrap dimensiones">
<!-- Dropdown Master or 1 -->
<select name="dimensiones" id="dimensiones" class="wpcf7-select quoteform">
<option value="" selected="selected" data-level="0">Seleccione una opción</option>
<option value="20 x 60 x 45" data-level="1">20 x 60 x 45</option>
<option value="30 x 10 x 50" data-level="2">30 x 10 x 50</option>
<option value="10 x 10 x 30" data-level="3">10 x 10 x 30</option>
</select>
</span>
<label>Peso</label><br>
<span class="wpcf7-form-control-wrap pesos">
<!-- Dropdown slave or 2 -->
<select name="pesos" id="pesos" class="wpcf7-select quoteform">
<option value="" selected="selected" data-level="0">Seleccione una opción</option>
<option value="400" data-level="1">400</option>
<option value="320" data-level="2">320</option>
<option value="100" data-level="3">100</option>
</select>
</span>
<label>Codigos</label><br>
<span class="wpcf7-form-control-wrap codigos">
<!-- Dropdown slave or 3 -->
<select name="codigos" id="codigos" class="wpcf7-select quoteform">
<option value="" selected="selected" data-level="0">Seleccione una opción</option>
<option value="A123" data-level="1">A123</option>
<option value="A263" data-level="2">A263</option>
<option value="A555" data-level="3">A555</option>
</select>
</span>Другие решения
Я думаю, что вы не должны использовать:
element.data('level')
вместо этого используйте это:
this.data('level')
detector