另一个下拉菜单的自动选择下拉菜单选项

Question

我有三个下拉菜单，但是我需要根据1中的选择自动选择2和3。为此，我正在使用数据级属性（因为我将将其用于其他目的）。

<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中，我吃甜点

将根据食物选择饮料和甜点。 如果选择食物选项一，则会自动选择饮料选项一和甜点选项一。

Answer 1

在您的情况下，您可以使用：selected选择器在jQuery中获得selected选项，如下所示： $(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> 

Answer 2

我认为您不应该使用：

element.data('level')

而是使用这个：

this.data('level')