CODEWITHSUNDEEP
javascriptphpjquerywordpress
Carlos Roman
Carlos Roman

Reputation: 81

Autoselect dropdown option of another dropdown

I have three dropdowns, but I need to auto-select 2 and 3 depending on the selection in 1. For this I'm using data-level attribute (because values I will use for other purposes).

<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>

And this snippet not work

$("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);
});

For example:

In master dropdown i've food, in slave 1 i've drinks and in slave 2 i've dessert

Drinks and desserts will be selected depending food. If you select food option one, you select automatically a drink option one and dessert option one.

Upvotes: 1

Views: 221

Answers (2)

camelsWriteInCamelCase
camelsWriteInCamelCase

Reputation: 1665

In your case you can get selected option in jQuery with :selected selector as follows: $(this).find(":selected"). Therefore, the code will be:

$("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>

Upvotes: 2

SebastianJ
SebastianJ

Reputation: 1

I think you shouldn't use:

element.data('level')

instead use this:

this.data('level')

Upvotes: 0

Related Questions