从下拉列表中选择一个选项后如何显示新的输入字段

Question

我必须制作一个带有一些输入选项的表单，其中一个是类型切换器（下拉菜单），它会显示一些选项，并且根据我选择的选项，它必须显示一个新的输入供我编写信息。这是 PHP、MySQL、HTML 和 CSS 中的一个项目。我可以使用 JS、Jquery、React，但对于 PHP 你需要使用 OOP 方法。

示例：
类型切换器（汽车/自行车/卡车）<-- 这是我的下拉菜单的 3 个选项。

如果我选择汽车，我需要一个新的输入框来输入汽车的型号。如果我选择自行车，我需要一个新的输入框来输入自行车的型号。

例如，如果我选择一辆车：
类型切换器：CAR
车型：
请提供车型

我的切换器：

<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>

以选择汽车为例，我需要出现一个带有一些标签“请提供汽车型号”的新输入栏所以我可以写下汽车的型号

Answer 1

可以使用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;
}

从下拉列表中选择一个选项后如何显示新的输入字段

How to make a new input field appear after choosing one option from a dropdown

html

javascript

css

php

jquery