CODEWITHSUNDEEP
javascriptjquery
iyal
iyal

Reputation: 1285

Generate option select on input change

<select id="gameid">
     //<option is a number 1-999>
</select>

<select id="netid">
     //<option is a number 1-999>
</select>

<select id="camp_id">
 <script>
 var a = $("#gameid").val(); 
 var b = $("#netid").val(); 
 var c = a+b; 

 for (var i = 1; i<=999; i++)
    {
        document.write("<option value='"+c+i+"'>"+c+i+"</option>");
    }
 </script>
</select>

The code above is to generate some options into selection.

What I want to do there is, if the val in the #gameid is changed, the option list will change too, and so does for the #netid.

However, the option doesn't change. It stay in the default value of the #gameid and #netid.

I don't know what I am missing here. I need a help, please.

[UPDATE]

This code almost work. However, when I do the second change on the #cameid after all I have been select, it doesn't change the #campid selection anymore. It will do change it again if I do the change too on the #netid. 

$("#gameid" && "#netid").on('change', function(){
   a = $("#gameid").val(), 
   b = $("#netid").val(),
   c = a+b; 
   $("#camp_id").empty();

   for (var i = 1; i<=999; i++){
    $("#camp_id").append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
   }   
});

Upvotes: 0

Views: 110

Answers (5)

Vikrant
Vikrant

Reputation: 5036

As you want to add options to HTML select dynamically. I have tried to achieve the same using i.e. to be call on $('#gameid').populate();.

Firstly, Add jquery library in <head> of page: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>`

WORKING DEMO 

$.fn.populate = function () {
    var $this = $(this);

    for (var i = 1; i<=999; i++){
        $this.append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
    }
}    
$('#gameid').populate();

You can add same for second select(drop-down) as well.

Upvotes: 1

madalinivascu
madalinivascu

Reputation: 32354

Use change event 

   $('#gameid,#netid').on('change',function (){
var a = $("#gameid").val(); 
var b = $("#netid").val(); 
   alert($(this).attr('id'));
var c = parseInt(a)+parseInt(b);

if ( $(this).attr('id') == 'gameid') {
    $el = $("#netid");} else {$el = $("#gameid")};
 $el.text('');
for (var i = 1; i<=999; i++)
    {
        $el.append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
    }
});

note: I used jquery, jsfiddle: https://jsfiddle.net/1zgre9pw/4/

Upvotes: 2

partypete25
partypete25

Reputation: 4413

 var a = $("#gameid").val(),
 b = $("#netid").val(),
 c;

$("#gameid").change(function(){
   a = $(this).val();  
   c = parseInt(a)+parseInt(b); 
   $("#camp_id").empty();

   for (var i = 1; i<=999; i++){
   $("#camp_id").append("<option value='"+(c+i)+"'>"+(c+i)+"</option>");
   }   
});

https://jsfiddle.net/partypete25/j9toh39c/

Upvotes: 2

Nandan Bhat
Nandan Bhat

Reputation: 1563

Don't forget to add Jquery library,

 <select id="gameid" onchange="generateOptions();">
    <!-- Your Options --> 
 </select>

 <select id="netid" onchange="generateOptions();">
 <!-- Your Options -->
 </select>

 <select id="camp_id">

 </select>


  <script type="text/javascript">
 var a,b,c,str="";



    function generateOptions()
    {
      a = $("#gameid").val(); 
       b = $("#netid").val(); 
       c = a+b; 
      for (var i = 1; i<=999; i++)
       {
        str= str + "<option value='"+c+i+"'>"+c+i+"</option>";
       } 
      $('#camp_id').html(str); 
    }

  </script>

Upvotes: 2

Nikos M.
Nikos M.

Reputation: 8345

Use something like this:

var options = ''; 
for (var i = 1; i<=999; i++)
{
  options += "<option value='"+c+i+"'>"+c+i+"</option>";
}
document.getElementById('camp_id').innerHTML = options;

Use similar to insert options to other select boxes if needed

Upvotes: 2

Related Questions