Question

I’ve a table with multiple rows, each row has a drop down list. I am new to javascript and is unable to retrieve the selected value from the row. Any idea how can it be done? Thanks in advance.

Code:

function chng_page(serialNum, rowid)
{
    alert(rowid);
    alert(serialNum);
    var select_index = document.getElementById('orderStatus').selectedIndex; 
    //get the value of selected option
    var option_value = document.getElementById('orderStatus').options[select_index].value;

    //redirect with value as a url parameter
    window.location = 'orderStatus.php?serialNum=' + serialNum + '&status=' + option_value;
}
</script>

//code for drop down list

<select id="orderStatus" name="orderStatus" onchange="chng_page(<?php echo $serialNum?    >, this.parentNode.parentNode.rowIndex)">
   <option value="Pending" <?php echo ($status == "Pending") ? ' selected="selected"' : ''; ?>>Pending</option>
   <option value="Cooking" <?php echo ($status == "Cooking") ? ' selected="selected"' : ''; ?>>Cooking</option>
   <option value="On The Way" <?php echo ($status == "On The Way") ? ' selected="selected"' : ''; ?>>On The Way</option>
   <option value="Delivered" <?php echo ($status == "Delivered") ? ' selected="selected"' : ''; ?>>Delivered</option>   
</select>

Answer 1

You didn’t mention if the select element in each row has a unique id or not, but it somehow shows in your code that they do.
In that case, you can use JQuery (a popular JavaScript framework) to retrieve the selected value.
Assuming you have included the JQuery file in your HTML, and attached an event handler to the select element (to make it easier, pass in the id of the current select element as a parameter in the function), do this:

var selected_value = $("#id_of_select_element option:selected").val();

If the ids of the select elements are unique, that single line of code will definitely work.