選択からの値に応じて 'N'入力を描画する

Question

特定の数の入力を描画しようとしています。この数値は選択入力の値に依存します。選択されたオプションは別の数値つまり、私の数値入力に3と入力すると、私の選択入力の選択されたオプションは3でなければなりません。この結果、この関数は3の入力を描画するはずです。たぶん私はあまり明確ではないんだけど、ここに私のコードで、私が試した：

$(document).ready(function() { 
 
    $('#Controls').on('blur', '#InputNumbers', function() { 
 
    selectValue(); 
 
    }); 
 
}); 
 

 
function selectValue() { 
 
    var inputVal = $('#InputNumbers').val(); 
 

 
    $('#MyInputs').val(inputVal); 
 
    $('#MyInputs').change(function() { 
 
    draw(); 
 
    }); 
 
} 
 

 
function draw() { 
 
    alert("Hi"); 
 
    var total = $('#MyInputs').val(); 
 
    var html = ""; 
 
    for (var i = 0; i < total; i++) { 
 
    html += '<input />'; 
 
    } 
 

 
    $('#draw').html(html); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="Controls"> 
 
    <input type="number" placeholder="Number of inputs" id="InputNumbers" /> 
 

 
    <select id="MyInputs" disabled> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 

 
    <div id="draw"> 
 
    </div> 
 

 
</div>

あなたが最初の2つのステップを見ることができるようにすると正常に動作し、問題は、私はこれを行うにしようとしたときです。

$('#MyInputs').change(function() { 
    draw(); 
}); 

機能は実行されません。どうすれば解決できますか？あなたが入力に変更イベントをバインドする必要が

Answer 1

その作業は、あなたが変更イベントを必要としないか、コードの下に参照してください

$(document).ready(function() { 
 
    $('#Controls').on('blur', '#InputNumbers', function() { 
 
    selectValue(); 
 
    }); 
 
}); 
 

 
function selectValue() { 
 
    
 
    var inputVal = $('#InputNumbers').val(); 
 

 
    $('#MyInputs').val(inputVal); 
 
    
 
    draw(); 
 
    
 
} 
 

 
function draw() { 
 
    alert("Hi"); 
 
    var total = $('#MyInputs').val(); 
 
    alert(total) 
 
    var html = ""; 
 
    for (var i = 0; i < total; i++) { 
 
    html += '<input />'; 
 
    } 
 

 
    $('#draw').html(html); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="Controls"> 
 
    <input type="number" placeholder="Number of inputs" id="InputNumbers" /> 
 

 
    <select id="MyInputs" disabled> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
</select> 
 

 
    <div id="draw"> 
 
    </div> 
 

 
</div>

Answer 2

は、あなたの選択は無効になっています：

$(document).ready(function() { 
 
    $('#Controls').on('blur', '#InputNumbers', function() { 
 
    selectValue(); 
 
    }); 
 
}); 
 

 
function selectValue() { 
 
    var inputVal = $('#InputNumbers').val(); 
 

 
    $('#MyInputs').val(inputVal); 
 

 
} 
 
$('#InputNumbers').change(function() { 
 

 
    draw(); 
 
}); 
 

 
function draw() { 
 
    $('#draw').empty(); 
 
    var total = parseInt($('#InputNumbers').val()); 
 
    for (var i = 0; i < total; i++) { 
 
    $('#draw').append('<input />'); 
 
    } 
 

 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="Controls"> 
 
    <input type="number" placeholder="Number of inputs" id="InputNumbers" /> 
 

 
    <select id="MyInputs" disabled> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    </select> 
 

 
    <div id="draw"> 
 
    </div> 
 

 
</div>