dynamic opened dropdown menu

Question

Assume that user enter a value for example 5 and then open new drop down menus as 5. When user update value as 7 , add new two dropdown menu but first 5 are not delete. How I do this?

it is about adding textbox using form

function add(text){
var TheTextBox = document.forms[0].elements['field_name']; //I think that's right, haven't done it in a while
TheTextBox.value = TheTextBox.value + text;

}

<select onchange="optionChanged2(this);">
    <option value="0">Hayır</option>
    <option value="1">Evet</option>
</select>

and I know loop should be used but how I don't know...

Answer 1

Based on my guess, you want to have the last number entered to determine the number of options that the select has without deleting the previous ones. If that's not the case adapt this snippet to your situation but you should get a general idea of how to add elements to the select.

Here is the html part:

<input type="text" id="text">
<select id="sel">
    <option value="0">Option 0</option>
    <option value="1">Option 1</option>
</select>

And the JavaScript part:

function add(text){
   var TheTextBox = document.getElementById("text");
   var TheSelect = document.getElementById("sel");

   var num = new Number(TheTextBox.value); // Making sure we get a number out of it
   if(num > TheSelect.options.length){ // Do we have a number greater than the number of options
       for(var i=0; i<(num-TheSelect.options.length); ++i){ // Add the extra options
            var option = document.createElement("option");
            option.setAttribute("value", i);
            option.innerHTML = text;
            TheSelect.appendChild(option);
       }
   }
   else { // We have more options that we need to lets remove them from the end
        for(var i=0; i<(TheSelect.options.length-num); ++i){
            TheSelect.removeChild(TheSelect.options[TheSelect.options.length-1]);
        }
   }
}

If this isn't what you wanted, you're going to have be me more specific.