Question

I’m new to javascript and need help to figure this one.

I have three menus where you select and option and for each menu you select it displays a row of data. In each row (i.e. 3 row for 3 selections) another select menu is available for you to pick a provider for that product. I created another select that you select a default provider and onchange the other menus in the rows change. The problem I have is that they all have the same id because when you pick an option a function gets called. I tried to loop through all select and from those selects with id=x change selected option but only works for 1st select found with that id

echo" function pickprovider($name, $idname){ \n";

echo" <select name='$name' id='idname'> \n";
echo" <option>1stprovider </option> \n";
echo"  <option>2ndprovider </option>\n";
echo " </select>\n";
echo" }\n";

echo" function defaultprovider($name, $idname) {\n";
echo" <select name='$name' id='idname' onchange='changeDflt(this);'> \n";
echo " <option>1stprovider </option> \n";
echo " <option>2ndprovider </option> \n";
echo "</select>\n";
echo" }\n";

 echo "<script type='text/javascript'>\n";
 echo "function ChangeDflt(list) { \n";
 echo "var x = list.options[list.selectedIndex].text;\n";
 echo "var allSelects = document.getElementsByTagName('select');\n";
 echo "for (var i = 0; i < allSelects.length; i++) { \n";
 ....
 change selected options for selects 
 echo "}\n";
 echo "}\n";
 echo "</script<\n";

I do not know how to change the function to make a unique id everytime the function is called. ….Can I use “div” tag when I get all the select elements in page?

Answer 1

I’m not really sure what you’re trying to accomplish with the select elements but if you structure your PHP to emit HTML and JavaScript differently, it gets both easier to read and easier to write both your HTML and your JavaScript.

<?php
    $base_id = "mySelect";      // set the string used as the basis for ids
    $base_name = $base_id;      // set the string used as the basis for names. There's no reason it cannot be the same as the id.

    $select_id = $base_id;      // set a variable to use for the id of the select
    $select_name = $base_name;  // set a variable to use for the name of the select

    // start a loop to emit the select elements
    for ($i = 0; $i < 3; $i++) {
        $select_id = $base_id.$i;       // set the id of the select to the base concatentated with the incrementer variable
        $select_name = $base_name.$i;   // same for the name. Variable value will be substituted on emission.
        echo "
<select name=\"$select_name\" id=\"$select_id\" onchange=\"changeDefault(this);\">
    <option value=\"0\">1st provider</option>
    <option value=\"1\">2nd provider</option>
</select>
";
    }
    // emit the JavaScript
    echo "
<script type='text/javascript'>
var changeDefault = function changeDefault(list) {
    var val = list.options[list.selectedIndex].value,           // get the value of the selected option
        allSelects = document.getElementsByTagName('select'),   // get the rest of the selects
        options = null,                                         // placeholder for option elements
        i = 0,                                                  // incrementer 1
        j = 0;                                                  // incrementer 2
    // change selected options for selects
    for (i = 0; i < allSelects.length; i += 1) {
        // get all option elements that are children of the select element
        options = allSelects[i].getElementsByTagName('option');
        // loop through the option elements
        for (j = 0; j < options.length; j += 1) {
            // set selected to true if the values match and false if they do not
            options[j].selected = options[j].value === val;
        }
    }
};
</script>
    ";
?>

That said, syntactical constructs like:

function defaultprovider($name, $idname) {
<select name='$name' id='idname' onchange='changeDflt(this);'>
 <option>1stprovider </option>
 <option>2ndprovider </option>
</select>
}

are completely invalid JavaScript code and will not run. You may want to review a tutorial on JavaScript. I recommend this one: http://www.hunlock.com/blogs/Essential_Javascript_–_A_Javascript_Tutorial. It starts with the basics and explains JavaScript far better than I can.