Tengo que hacer un formulario con algunas opciones de entrada y una de ellas es un Type Switcher (desplegable) que me muestra algunas opciones y, dependiendo de la opción que elija, tiene que aparecer una nueva entrada para escribir esa información. Este es un proyecto en PHP, MySQL, HTML y CSS. Puedo usar JS, Jquery, React pero para PHP U necesito usar el enfoque OOP.
Ejemplo:
Type Switcher (Car / Bike / Truck) <-- estas son mis 3 opciones de un menú desplegable.
Si elijo coche, necesito un nuevo campo de entrada para poner el modelo del coche. Si elijo Bicicleta, necesito un nuevo campo de entrada para poner el modelo de la bicicleta.
Ejemplo si elijo un coche:
Conmutador de tipo: COCHE
Modelo de auto:
por favor proporcione el modelo del coche
Mi conmutador:
<div class="type-switcher"> <div class="input-wrapper"> <label for="productType">Type Switcher</label> <select name="Select Type" id="productType" > <option value="car">car</option> <option value="truck">truck</option> <option value="bike">bike</option> </select> </div> </div>al seleccionar automóvil, por ejemplo, necesito que aparezca una nueva barra de entrada con alguna etiqueta "por favor proporcione el modelo del automóvil" para que pueda escribir el modelo del automóvil
puede agregar un campo de entrada usando js
html
<div class="type-switcher"> <div class="input-wrapper"> <label for="productType">Type Switcher</label> <select name="Select Type" id="productType" onclick="addField()" > <option value="car">car</option> <option value="truck">truck</option> <option value="bike">bike</option> </select> </div> <div id="text"></div> </div> <script src="index.js"></script>js
const field=document.getElementById('text'); const model=document.getElementById('productType') function addField(){ let html=`<label>${model.value} Model:</label><input type="text"></input>` field.innerHTML=html; }