Javascript and multiple select values

Question

I have a form with 2 <select>, select1 allows simple selection and select 2 allows multiple selection. What I want is, when the user select something in select1, associated data in select2 should be selected according to my array of data.

function selectIt() {
 var divArray = new Array();
 // this is the value for first element on select1
 divArray[0] = 3;
 // these are the corresponding values on select2 that should be selected
 divArray[0] = new Array();
 divArray[0][0] = 5;
 divArray[0][1] = 1;
 divArray[0][2] = 2;
 // and so on
 divArray[1] = 2;
 divArray[1] = new Array();
 divArray[1][0] = 6;
 divArray[1][1] = 3;
 divArray[1][2] = 2;

   var select2  = document.getElementById("secondSelect");
   for (var i=0; i < select2.options.length; i++)
      select2.options[i].selected = false;
}

So if the user selects index 1, in select2 items 2,3 and 6 should be selected.

First I deselect previously selected items using:

var select2 = document.getElementById("secondSelect");
for (var i=0; i < select2.options.length; i++)
    select2.options[i].selected = false;

After that, I do not know what to do.

some loop here
   select2.options[i].selected = true;

Any help will be greatly apreciated!!!!

You don't like jquery library ? Would be much easier to use functions and loops here. — Snake Eyes
– Snake Eyes, Commented Oct 16, 2013 at 18:39

irla · Accepted Answer · 2013-10-16 18:56:45Z

1

You can declare arrays in this way:

divArray[0] = [5, 1, 2];

I will just try to answer by writing it without testing so bare in mind it can have some errors:

document.getElementById("firstSelect").onchange = function() {
    var optionIndex = this.selectedIndex; // in this function 'this' is select element
    var optionsToSelect = divArray[optionIndex];
    var select2 = document.getElementById("secondSelect");
    for (var i = 0; i < optionsToSelect.length; i++){
       select2.options[optionsToSelect[i]].selected = true; 
    }
};

answered Oct 16, 2013 at 18:56

irla

4893 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicoli · Accepted Answer · 2013-10-17 21:11:14Z

1

Becuase I need some database data I combined some PHP code inside the JS:

<script type="text/javascript">
function selectM() {
var divArray = new Array();

<? 
if ($result = $database->getDivs()){
    $cont = 0;
    while ($divs = mysql_fetch_array($result)) { 
        $da =  "divArray[".$divs['iddiv']."]";
        if ($resultEd = $database->getEdic($divs['iddiv'])){
            if ($cont == 0) $da .= " = [";
            $tot    = mysql_num_rows($resultEd);
            while ($divEd = mysql_fetch_array($resultEd)) { 
                $da .= $divEd['ed_id']." ";
                $cont++;
                if ($cont < $tot) $da .= ", ";

            }
        }
        $da .= "]; ";
        $cont = 0;
        echo $da;
    }
}  
?>

var largo, valor;
var inexE           = document.getElementById("idDiv").value ;
var ediciones       = document.getElementById("ediciones");
  if (inexE > 0) {
    var toSelect = divArray[inexE];
    for (var i=0; i < ediciones.options.length; i++) {
        ediciones.options[i].selected = false;
        valor       = ediciones.options[i].value;
        largo       = toSelect.length;
        for(var j = 0; j < largo; j++) {
            if(toSelect[j] == valor) 
                ediciones.options[i].selected = true;
        }
    }
  } else {
    for (var i=0; i < ediciones.options.length; i++) 
        ediciones.options[i].selected = false;
  }

}
</script>

Works perfect!

Thank you for pointing me in the right direction!!!

answered Oct 17, 2013 at 21:11

Nicoli

9842 gold badges9 silver badges28 bronze badges

1 Comment

irla Over a year ago

It would be better if you would build some php object, fill it with your data and then use: var divArray = <? echo json_encode($your_object); %> - Much more readable and maintainable.

Collectives™ on Stack Overflow

Javascript and multiple select values

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related