Ввод значения «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>