Popolare select da array

**ninja72** · 13-12-2021, 12:40

Non so se ho capito bene, prova a vedere se questo esempio fa al caso tuo.
In questo esempio i dati li ho messi in un file json esterno che prelevo in modo asincrono con fetch.

codice:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <select id="brand"></select>
        <br />
        <select id="brand_model"></select>

        <script>
            // prettier-ignore
            const initApp = async () => {
                const brand = document.getElementById('brand')
                const brandModel = document.getElementById('brand_model')

                const objData = await fetch("data.json").then(res =>res.json())

                const fillBrandModel = ()=>{
                    const selectKey = brand.value
                    brandModel.textContent = ''
                    for (const key in objData) {
                        
                        if (selectKey === key){
                        objData[key].forEach(text => {
                            const option = document.createElement('option')
                            option.textContent = text['Name']
                            brandModel.appendChild(option)
                            })
                        }
                    }
                }

                const fillBrand = (()=>{

                    Object.keys(objData).forEach(key => {
                        const option = document.createElement('option')
                        option.textContent =  key
                        brand.appendChild(option)
                    })
                    fillBrandModel()
                })()

                brand.addEventListener("change",fillBrandModel)
            }

            document.addEventListener("DOMContentLoaded", initApp)
        </script>
    </body>
</html>

**ffw** · 13-12-2021, 14:06

Niente da fare. Provato anche così, ma non crea le options.

codice:

        <script>
            // prettier-ignore
            const initApp = async () => {
                const brand = document.getElementById('brand')
                const brandModel = document.getElementById('brand_model')


                const objData = await fetch(<?= json_encode($brands) ?>).then(res =>res.json())


                const fillBrandModel = ()=>{
                    const selectKey = brand.value
                    brandModel.textContent = ''
                    for (const key in objData) {
                        
                        if (selectKey === key){
                        objData[key].forEach(text => {
                            const option = document.createElement('option')
                            option.textContent = text['Name']
                            brandModel.appendChild(option)
                            })
                        }
                    }
                }


                const fillBrand = (()=>{


                    Object.keys(objData).forEach(key => {
                        const option = document.createElement('option')
                        option.textContent =  key
                        brand.appendChild(option)
                    })
                    fillBrandModel()
                })()


                brand.addEventListener("change",fillBrandModel)
            }


            document.addEventListener("DOMContentLoaded", initApp)
        </script>

Nel codice sorgete l'array c'è

codice:



        <script>


            // prettier-ignore


            const initApp = async () => {


                const brand = document.getElementById('brand')


                const brandModel = document.getElementById('brand_model')





                const objData = await fetch({"Acer":[{"ID":"4","Name":"Lorem iosum"}],"Alcatel":[{"ID":"5","Name":"Lorem iosum"}],"Apple":[{"ID":"2","Name":"Iphone 5"},{"ID":"12","Name":"Iphone 6"},{"ID":"13","Name":"Iphone 7"},{"ID":"14","Name":"Iphone 6 Plus"},{"ID":"15","Name":"Iphone 6S"},{"ID":"16","Name":"Iphone 6s Plus"}],"dasda":[{"ID":"6","Name":"Qualcosa"}],"Samsung":[{"ID":"1","Name":"Galaxy S10 Plus"},{"ID":"8","Name":"Galaxy S10"},{"ID":"9","Name":"Galaxy S10 Lite"},{"ID":"10","Name":"Galaxy S7 Edge"},{"ID":"11","Name":"Galaxy S8 plus"}],"Test":[{"ID":"7","Name":"Model"}],"Xiaomi":[{"ID":"3","Name":"Lorem iosum"}]}).then(res =>res.json())





                const fillBrandModel = ()=>{


                    const selectKey = brand.value


                    brandModel.textContent = ''


                    for (const key in objData) {





                        if (selectKey === key){


                        objData[key].forEach(text => {


                            const option = document.createElement('option')


                            option.textContent = text['Name']


                            brandModel.appendChild(option)


                            })


                        }


                    }


                }





                const fillBrand = (()=>{





                    Object.keys(objData).forEach(key => {


                        const option = document.createElement('option')


                        option.textContent =  key


                        brand.appendChild(option)


                    })


                    fillBrandModel()


                })()





                brand.addEventListener("change",fillBrandModel)


            }





            document.addEventListener("DOMContentLoaded", initApp)


        </script>

Discussione: Popolare select da array

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio


<script>
	// prettier-ignore
	const initApp = async () => {
	const brand = document.getElementById('brand')
	const brandModel = document.getElementById('brand_model')

	const objData = await fetch({"Acer":[{"ID":"4","Name":"Lorem iosum"}],"Alcatel":[{"ID":"5","Name":"Lorem iosum"}],"Apple":[{"ID":"2","Name":"Iphone 5"},{"ID":"12","Name":"Iphone 6"},{"ID":"13","Name":"Iphone 7"},{"ID":"14","Name":"Iphone 6 Plus"},{"ID":"15","Name":"Iphone 6S"},{"ID":"16","Name":"Iphone 6s Plus"}],"dasda":[{"ID":"6","Name":"Qualcosa"}],"Samsung":[{"ID":"1","Name":"Galaxy S10 Plus"},{"ID":"8","Name":"Galaxy S10"},{"ID":"9","Name":"Galaxy S10 Lite"},{"ID":"10","Name":"Galaxy S7 Edge"},{"ID":"11","Name":"Galaxy S8 plus"}],"Test":[{"ID":"7","Name":"Model"}],"Xiaomi":[{"ID":"3","Name":"Lorem iosum"}]}).then(res =>res.json())

	const fillBrandModel = ()=>{
	const selectKey = brand.value
	brandModel.textContent = ''
	for (const key in objData) {

	if (selectKey === key){
	objData[key].forEach(text => {
	const option = document.createElement('option')
	option.textContent = text['Name']
	brandModel.appendChild(option)
	})
	}
	}
	}

	const fillBrand = (()=>{

	Object.keys(objData).forEach(key => {
	const option = document.createElement('option')
	option.textContent = key
	brand.appendChild(option)
	})
	fillBrandModel()
	})()

	brand.addEventListener("change",fillBrandModel)
	}

	document.addEventListener("DOMContentLoaded", initApp)
	</script>