Select Box PHP Array => Javascript On Click Div

Question

I have a PHP array that populates a select box on my page and would like to change the value of this select on click of a div to said divs ID.

I am relatively new to this and was wondering if this is possible via Javascript? Below is what I have so far, the correct page is called but the workcenter input box remains unchanged, defaults to [0].

    <SELECT class="workcenter" class="form-control" 
    style="display: none" onchange="this.form.submit()">


<?php for($i = 0; $i < sizeof($Workcenters);$i++){
                            if ($i == $WorkcenterSelected ) $selected = 'selected'; 
                            else $selected = '';
                            echo "<option value = {$i} {$selected}>{$Workcenters[$i]} </option>";

         }
                        ?>

<div class= 'workcentres' id='RWMS' value="RWMS" 
<a href='#' title= "Status: <?php echo $StatusRWMS ?>";>RWMS</a></p></div>

<script>
$(function() {
$("#RWMS").click(function() { //On Click of table row
    var b = $("#RWMS").val();
    $("#workcenter").val(b);
    $("#form").attr('action', '?action=HS'); //Hourly Summary Tab
    //Post value of shift to Hourly Summary Tab
    $("#form").submit(); //Submit Form
});
});
</script>

Any help would be appreciated.

Answer 1

First of all, add value between colons for example change

echo "<option value = {$i} {$selected}>{$Workcenters[$i]} </option>"

to

echo "<option value = '{$i}' {$selected}>{$Workcenters[$i]} </option>"

Second, change <div class= 'workcentres' id='RWMS' value="RWMS"

to

<div class= 'workcentres' id='RWMS' value="RWMS">

then test your code again and let us know if it worked.

Answer 2

For those who are interested this is how I solved the problem. Due to the select box accepting a PHP array I figured if I set the ID of the divs to the index value I would then be able to pass that value to the Select with javascript.

For examples sake here is a couple of entries to the array, their index and value:

Workcenters[0] = 'BLOT'
Workcenters[3] = 'CUT3'

The Divs associated:

<div class='workcentres' name="BLOT"id= 0>
<a href='#' title= 'Status: <?php echo $StatusBlot ?>'>BLOT</a></div>
<div class='workcentres' name="CUT3"id= 3>
<a href='#' title= 'Status: <?php echo $StatusCut3 ?>'>CUT3</a></div>

Finally the Javascript:

<script>
    $(function() {
        $(".workcentres").click(function() { //On Click of table row
        var b = $(this).attr('id');
        $("#workcenter").val(b);
        $("#form").attr('action', '?action=HS');
        $("#form").submit(); //Submit Form
        });
    });
</script>