CODEWITHSUNDEEP
javascriptselectmultidimensional-array
Nicoli
Nicoli

Reputation: 944

Javascript and multiple select values

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!!!!

Upvotes: 1

Views: 238

Answers (2)

Nicoli
Nicoli

Reputation: 944

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!!!

Upvotes: 1

irla
irla

Reputation: 489

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; 
    }
};

Upvotes: 1

Related Questions