Update combobox's selected index based on order of the clicked checkbox

Question

I am trying to implement a form with checkboxes and comboboxes. If a chekbox is clicked, the combobox is updated with the order of clicked checkboxes.

For example, if I click all checkboxes, all the comboboxes should have options like "1","2","3". if I click first and third checkboxes, both comboboxes should have options "1" and "2" since only two checkboxes are clicked.

Here, I also want to update the selected option index according to my clicking order. For example, if i click the first checkbox, the corresponding combobox should have an option "1" and this option should be selected index.

Until this part, It works like a charm.But,

if the checkbox is unchecked, the selected indexes are not preserved and no longer show the selected index properly.

I have done this http://jsbin.com/UjOYuVA/3/edit

So, the problem occurs when I unchecked the checkbox or checkboxes. How to fix that issue?

wwwwwwaayy unclear man, got no clue what you want, some code may help a bit. — Math chiller, Sep 09 '13 at 03:04
Actualy the select options are added dynamically i guess?? is that necessary ..or hardcode them and just enable the selectbox on checked — Vaibs_Cool, Sep 09 '13 at 03:06
Is JQuery UI an option? Check out this demo: http://jqueryui.com/sortable/#connect-lists. You can use the left list for languages, and the right list for languages the user knows. — 000, Sep 09 '13 at 03:07
@JoeFrambach yeah i know it has very nice features but how to apply my case — Co Koder, Sep 09 '13 at 03:09
You can use the left list for languages, and the right list for languages the user knows. — 000, Sep 09 '13 at 03:09
@tryingToGetProgrammingStraight I rephrased my question can you check it out? and you can also check my code in jsfiddle link in the question. — Co Koder, Sep 09 '13 at 20:12

score 0 · Answer 1 · edited May 23 '17 at 12:20

create a array selected and add new selections using push if not already in there (like so if(selected.indexOf(new) < 0)selected.push(new); then splice when unchecked like so selected.splice(selected.indexOf(unchecked),1) and loop through remaining options, using indexOf + 1

so in english and with your code (i used your names so its for you only really)

var selected = [];

function enableDisable(checked, id){//checked = this.checked    id = this.id

    if(!checked){
        selected.push(id);
        //write drop-down
    } else {
        selected.splice(selected.indexOf(id),1);
        for(var i in selected) {
            slctEleme = document.getElementById("slct" + selected[i].substr(selected[i].length - 1),0);
            slctElem.innerHTML = "";
            for (var j in selected)
                 slctElem.innerHTML += "<option value = '"+(j+1)+"'"
                 if ( i = j ) slctElem.innerHTML += "selected";
                 slctElem.innerHTML += ">" +(j+1)+ "</option >";
        }
    }
}

you can also change the index of a value in the array when they change their choice, used with this code, they will keep their selection with a checkbox change. again look into jquery, this is just a javascript attempt.

@CoKoder its probably alot simpler in jquery you should look into that — Math chiller, Sep 09 '13 at 20:49

score 0 · Accepted Answer · answered Sep 10 '13 at 04:43

0

As i said you before in your first for loop you need to save selected values as

/*Saving values*/  
              selectValues[i]=document.getElementById("slct"+id_check).selectedIndex;

And in your last for loop restore them as:

/*Restoring values*/
      for (var j=0; j<inputElems.length; j++) {

        var select2 = document.getElementById("slct"+j);
        if(selectValues[j]!=-1){
          if(selectValues[j]<select2.options.length){
           select2.selectedIndex=selectValues[j];
          }
          else{
           select2.selectedIndex=select2.options.length-1; 
          }

        }else{
          if(j<select2.options.length){
           select2.selectedIndex=j;
          }
          else{
           select2.selectedIndex=select2.options.length-1; 
          }
        }

      }

Check here, i modified. If selected index not present it will select last index of that selection box.

answered Sep 10 '13 at 04:43

Rameez

1,712
2
18
39

Thanks, but the thing is that if check all checkkboxes and then uncheck the first one the selected index is not shown properly for the current selected slct. It is showing 2 for both, but they should 1 and 2 respectively. – Co Koder Sep 10 '13 at 04:50
I am actually dealing with the last for loop in my original jsbin code. This part takes care of showing proper index. – Co Koder Sep 10 '13 at 04:52
Why it should show 1 and 2 respectively? if all 3 are selected with values as 1,2,3 then if unchecked first one then 2 and 3 should preserve their values, but only 2nd one can preserve value because for 3rd one no 3 value is present. Either you can give 1 into 3rd or reordering all selections 1,2,3 is not preserving right?? if you allowing user to select then he might select 2 in 3rd selection and will expect to preserve if he unchecked 1st. – Rameez Sep 10 '13 at 04:57
I'll suggest to restore indexes in last loop and add indexing in order in another loop after that, only for those which are empty. – Rameez Sep 10 '13 at 04:59
Basically, the clicking order should present in the selections. Yes, the user can always change the order, but it is for making his life easier. – Co Koder Sep 10 '13 at 05:04
then simply add indexing in order for selected selections, without considering or saving their previous selections. – Rameez Sep 10 '13 at 05:06
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37076/discussion-between-eez-and-co-koder) – Rameez Sep 10 '13 at 05:23

Update combobox's selected index based on order of the clicked checkbox

2 Answers2

Linked