Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

MekouRaouf's avatar

Dynamic select input

I'm coding a dynamic select input where i'll like the newly added selection input options shouldn't have the selected option value in the previous select input? I need some help I don't know how to remove the selected value in new select input options array for multiple creations.

<div class="col-12">
			<el-select multiple v-model="beneficiaireForm.dynamicForm[idx].adherentId" class="m-2" filterable placeholder="Choisir le beneficiaire" size="large" @change="loadBeneficiaireCredentials(formElt)">
						<el-option v-for="(potentialBeneficiaire, index) in BeneficiaireList" :key="potentialBeneficiaire.adherent.id" :label="potentialBeneficiaire.adherent.nom+' '+potentialBeneficiaire.adherent.prenom+' ('+potentialBeneficiaire.adherent.telephone1+')'" :value="potentialBeneficiaire.adherent.id" />
			</el-select>  
            <el-input-number v-model="beneficiaireForm.dynamicForm[idx].part_a_bouffer" :min="0" @change="handleNumInput1" placeholder="Nombre de parts a bouffer" />&nbsp;
            <Delete @click="deleteBeneficiaireInput(formElt)" v-if="beneficiaireForm.dynamicForm.length > 1" style="width: 1em; height: 1em; margin-right: 8px; color: red;" class="delete__btn" />
                            </div>
<script>
    const listPotentialBeneficiaire = ref([])
    let selectedBeneficiaire = ref([])
    let removedBeneficiaire = ref([])
    let BeneficiaireList = ref([])

const beneficiaireForm = reactive({
        selectedBeneficiaire: '',
        dynamicForm: [
            {
                part_a_bouffer: '',
                adherentId: ''
            }
        ]
    })

const loadBeneficiaireCredentials = (elt) => {
        // console.log(elt)
    }

    const addBeneficiaireInput = () => {
        let newKey = beneficiaireForm.dynamicForm.length
        beneficiaireForm.dynamicForm.push({ part_a_bouffer: '', adherentId: '' })
    }
    
    const deleteBeneficiaireInput = (elt) => {
        let idx = beneficiaireForm.dynamicForm.indexOf(elt)
        beneficiaireForm.dynamicForm.splice(idx, 1)
    }
</script>
0 likes
1 reply

Please or to participate in this conversation.