JQuery can't populate a combo box
Please check my code, I can't seem to get it work...
- <html>
- <head>
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- var options = '';
- var keyExempts = [ 33,34,35,36,37,38,39,40 ];
- rankingOptions = {
- populate: function(census){
- var combos = $("select.entryRank");
- var selectedComboValues = new Array();
-
- for(var i=0; i<combos.length; i++){
- // get all combo box values
- var data = $(combos[i]).val();
- if(data!=""){
- selectedComboValues.push(data);
- }
- }
-
- for(var j=0; j<combos.length; j++){
- // copy currently selected value.
- // this is used to re-apply the value before re-population if there is currently selected item in the combo box.
- var comboValue = $(combos[j]).val();
-
- // empty the combo box leaving an empty option.
- $(combos[j]).empty().append($("<option></option>"));
-
- // populate the combo box with new values except values already selected from the other combo boxes.
- for(var k=1; k<=census; k++){
- // if the current iteration is not included in the selected values, append it to the combo box.
- // it is essential to convert the iterated value to string
- // before using the $.inArray because the data type of selectedComboValues' elements are String.
- if($.inArray(String(k),selectedComboValues)==-1){
- $(combos[j]).append("<option value='"+String(k)+"'>"+k+"</option>");
- }
- }
-
- // if there is a selected item in the combo box before it was re-populated, put it back.
- if( $.inArray(comboValue, selectedComboValues)>-1 ){
- $(combos[j]).val(comboValue);
- }
- }
- selectedComboValues.length = 0;
- }
- }
-
- $("select.entryRank").change(function(){
- rankingOptions.populate(15);
- });
-
- rankingOptions.populate(15);
- });
- </script>
- </head>
- <body>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select><br/>
- <select class="entryRank">
- <option></option>
- </select>
- </div>
- </body>
- </html>
Once you select a value from one of the checkbox, the selected value should be omitted from all the checkboxes. However, in my code, you can't select any value. It just keeps from being selected. Please help me on this one.