How to validate the field by passing a value through the change method

Question

I’m new to javascript, I would like help with a problem.

I managed to make sure that when selecting the value of the first select of "UNIT" the bottom select came with the same value, but as you can see in the image it is as required yet and does not enable the field to finalize the purchase. How can I solve this problem?

Note: follows the JS/TS code used:

class UnitSelection {
get targets(): NodeListOf<HTMLSelectElement> {
    return document.querySelectorAll('[data-option-id]');
}

init(): void {
    this.attachListeners();
}

attachListeners(): void {
    this.targets.forEach(option => {
        option.addEventListener('change', (e: Event) =>
            this.handleChange(e)
        );
    });
}

handleChange(e: Event): void {
    const target: EventTarget | null | HTMLSelectElement = e.currentTarget;
    if (!(target instanceof HTMLSelectElement)) {
        return;
    }

    const value = target.value;

    this.targets.forEach(target => {
        if (target.value == '') {
            target.value = value;
        }
    });
}} const unitSelection = new UnitSelection(); unitSelection.init();

HTML:

<select name="place" location-select data-item-id="<?php echo $_item->getId(); ?>" data-product-id="<?php echo $_item->getProductId(); ?>" data-option-id="<?php echo $optionId; ?>">
                <?php if ($placeList) : ?>
                    <?php if (is_string($placeList)) : ?>
                        <option value="1"><?php echo $placeList ?></option>
                    <?php else : ?>
                        <option value="">Selecione...</option>
                        <?php foreach ($placeList as $key => $place) : ?>
                            <?php $_formatedOptionValue = $this->getFormatedOptionValue($place) ?>

                            <?php if ($_formatedOptionValue['value'] === $selectedOption) : ?>
                                <option selected="selected" value="<?php echo $key; ?>">
                                    <?php echo $_formatedOptionValue['value'] ?>
                                </option>
                            <?php else : ?>
                                <option value="<?php echo $key; ?>">
                                    <?php echo $_formatedOptionValue['value'] ?>
                                </option>
                            <?php endif; ?>

                        <?php endforeach; ?>
                    <?php endif; ?>

                <?php else : ?>
                    <option value="1">Unidade Padrão</option>
                <?php endif; ?>
            </select>

I appreciate the help ;)

Answer 1

It can be done as follows to change the selects that are above what you are changing

const selects = document.querySelectorAll(".unity");

function selectChange(end=0,value) {
  for(let i = 0; i< end; i++){
    selects[i].value = value
  }
}

function setOnChangeEvent() {
  for(let i = 0; i< selects.length; i++){
    selects[i].onchange = () => {
      selectChange(i,selects[i].value);
    }
  }
}

setOnChangeEvent();

<label>Unidade:</label><br/>
<select class="unity">
  <option value="1">Valor 1</option>
  <option value="2">Valor 2</option>
  <option value="3">Valor 3</option>
</select>
<select class="unity">
  <option value="1">Valor 1</option>
  <option value="2">Valor 2</option>
  <option value="3">Valor 3</option>
</select>
<select class="unity">
  <option value="1">Valor 1</option>
  <option value="2">Valor 2</option>
  <option value="3">Valor 3</option>
</select>
<select class="unity">
  <option value="1">Valor 1</option>
  <option value="2">Valor 2</option>
  <option value="3">Valor 3</option>
</select>