How to show dynamic input form based on value on select-CodePudding

i have code like this, how to show another input form. let say i want to choose value="2" will show 2 new input form.

<div >
  <label for="proses">Proses</label>
    <select  id="prosess" name="prosess" required>
        <option value="" hidden>- Pilih Proses -</option>
         <option value="1">1 Proses</option>
         <option value="2">2 Proses</option>
         <option value="3">3 Proses</option>
         <option value="4">4 Proses</option>
         <option value="5">5 Proses</option>
         <option value="6">6 Proses</option>
         <option value="7">7 Proses</option>
         <option value="8">8 Proses</option>
         <option value="9">9 Proses</option>
      </select>
</div>

CodePudding user response：

is this what you looking for ?

$('select').change(function(){
  const num = $(this).val()
  let html = '';
  
  $('input[type="text"]').remove();
  
  for(i = 0; i < num; i  ){
    html  ='<input type="text">'    
  }
  
  $('form').append(html)
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form action="">
  <div >
  <label for="proses">Proses</label>
    <select  id="prosess" name="prosess" required>
        <option value="" hidden>- Pilih Proses -</option>
         <option value="1">1 Proses</option>
         <option value="2">2 Proses</option>
         <option value="3">3 Proses</option>
         <option value="4">4 Proses</option>
         <option value="5">5 Proses</option>
         <option value="6">6 Proses</option>
         <option value="7">7 Proses</option>
         <option value="8">8 Proses</option>
         <option value="9">9 Proses</option>
      </select>
</div>
</form>

CodePudding user response：

I hope this will help you. I simply create the array and save in state. On basis of that apply map to render the inputs.

function App() {

        const [proses, setProses] = useState([])

        const handleClick = (e) => {
        let inputArray = []
        for(var i = 0; i < e.target.value; i  ){
            inputArray.push(i)
        }
        setProses(inputArray)
        }

        const renderInputs = () => {
        return proses.map(i => {
            return <div>
            <input />
            </div>
        })
        }

        return (
        <div >
            <label for="proses">Proses</label>
            <select  onChange={handleClick} id="prosess" name="prosess" required>
                <option value="" hidden>- Pilih Proses -</option>
                <option value="1">1 Proses</option>
                <option value="2" >2 Proses</option>
                <option value="3">3 Proses</option>
                <option value="4">4 Proses</option>
                <option value="5">5 Proses</option>
                <option value="6">6 Proses</option>
                <option value="7">7 Proses</option>
                <option value="8">8 Proses</option>
                <option value="9">9 Proses</option>
            </select>
            {renderInputs()}
        </div>
        );
    }