how to fetch the selected value of a drop down list to another drop down list

Question

I'm Developing a php file for performing 2 drop down list values.

In my Drop down list, i have list of categories like Item1,Item2,Item3,Item4,...

And in another drop down list i have sub categories for each categories in the 1st List as A, B,C,D,E,F,...

My idea is, while changing the value of the 1st list, i need to pass the Value to the 2nd List...

Which means, if i change the value in 2nd list, it must fetch the value which selected in the 1st list...

The Sub category is same for all the Categories. But in my calculation, i used price for each category and sub-category..

So,..

Item 1 -> A = 100 Item 2 -> A = 75 Item 1 -> B = 198 Item 2 -> B = 146 Item 1 -> C = 160 Item 2 -> C = 175

I need to fetch the Selected item, to retrieve the amount for my calculation...

How could i achieve this...

<select name="Category1" size="1" id="Category1" >
  <option value="Item1">Item1</option>
  <option value="Item2">Item2</option>
  <option value="Item3">Item3</option>
  <option value="Item4">Item4</option>
  <option value="Item5">Item5</option>
  <option value="Item6">Item6</option>
</select>
<select name="Category2" size="1" id="Category2" onchange=function()>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
  <option value="F">F</option>
  <option value="G">G</option>
  <option value="H">H</option>
</select>

Here i need to fetch the selected value of Category1, in the function()...

Answer 1

Your syntax is wrong try

<select name="Category2" size="1" id="Category2" onchange="function(document.getElementById('Category1').value);">

pass value of category1 as argument when change happens to select.

OP Comment Response

<script type="text/javascript">  
    function changeFunction(cat)
    {
        alert(cat);
    }
</script>

<select name="Category1" size="1" id="Category1" >
    <option value="Item1">Item1</option>
    <option value="Item2">Item2</option>
    <option value="Item3">Item3</option>
    <option value="Item4">Item4</option>
    <option value="Item5">Item5</option>
    <option value="Item6">Item6</option>
</select>
<select name="Category2" size="1" id="Category2" onchange="changeFunction(document.getElementById('Category1').value);">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
    <option value="H">H</option>
</select>

above code is tested now check i am sure it will work.

Answer 2

While my answer is similar to Devang's, the slightly more proper way to do this could be like so:

<select id="category" onchange="calculatePrice">
  ...
</select>
<select id="subCategory" onchange="calculatePrice">
  ...
</select>
<input id="price">

<script>
  function calculatePrice() {
    var category = document.getElementById('category').value,
        subCategory = document.getElementById('subCategory').value;

    if (category && subCategory) {
      document.getElementById('price').value = ...;
    }
  }
</script>