Sou novato em javascript, gostaria de ajuda com um problema.
Consegui fazer com que ao selecionar o valor do primeiro select de "UNIDADE" o select de baixo viesse com o mesmo valor, porém como podem ver na imagem ele fica como required ainda e não habilita o campo para finalizar a compra. Como posso resolver esse problema?
Obs.: segue o código JS/TS utilizado:
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>
Agradeço a ajuda ;)