javascript - Dynamic drop down list is not working after adding the rows dynamically

396

I am new with php and javascripts. I have to create a dynamically add or delete rows by clicking a button, for which I am using table and javascript is working fine. I also have a dynamic drop drown list within the rows of the above dynamically added elements. Now the dynamic drop down list is working fine when I have only one row in my table because the function takes the id where to post the result as argument. But when I add more rows the dynamic drop down lists always points to the first row id. I do not know how to put the dynamic id or is it possible to change the id. Here is the code:

<table id="dataTable"  border="1"> <!-- -->
 <tbody>

  <tr>
  <p>
  <td >
    <input id="checkbox1" type="checkbox" class = 'chk' name="chk[]" />
  </td>
  <td>
  <label>Server Type</label>
  <select id="BX_Server_Type" name="BX_Server_Type[]">
    <option value="">Select Server</option>
    <option>EMAIL Server</option>
    <option>Web Server</option>
    <option>FTP Server</option>
    <option>DNS Server</option>
    <option>WAP Server</option>
    <option>AUTHETICATION Server</option>
  </select>
  </td>

  <td>
  <label for="BX_Vendor">Server Vendor</label>
  <select id="BX_Vendor" name="BX_Vendor[]" selected **onChange="getProduct(this.value,'Product_list1');" >**
  <option value="" selected>Select Vendor</option> 
  <?php
    $sql="SELECT DISTINCT firewall.VENDOR FROM firewall";
    $result=$dbhandle->query($sql);
    while ($rs=$result->fetch_assoc()){
      ?>
      <option value="<?php echo $rs["VENDOR"]; ?>"><?php echo $rs["VENDOR"]; ?></option>
  <?php
    }
  ?>
  </select>
  </td>

  <td>
  <label >Server Product </label>
  <select id="Product_list1" name="BX_Product[]"> 
  <option value="">Select Product</option> 
  </select> 
  </td>

  <td>
  <label for="BX_Number">No of Server</label>
  <input id="BX_Number[]" name="BX_Number"> 
  </td>
  </p>
 </tr>

 </tbody>
</table> 

The function getProduct(this.value,'Product_list1') is taking the id 'Product_list1' where it is posting the results of the query.

<script>
function getProduct(val1,val2)
{
    $.ajax({
        type:"POST",
        url: "get_product.php",
        data: 'VENDOR='+val1,
        success: function (data){
            $("#"+val2).html(data);
        }
    });
}
</script>

The above functions works fine for if I have a static id, but now when I am adding the rows in the table dynamically, it is not working. Anyone can help me please how to make it work??

Addition and removal of rows are just working fine, only problem in the dynamic drop down list after adding new rows. Please help.

Thanks.

762

Answer

Solution:

I think you meant "Cascading combo boxes" ?

If so, This link here should help you: http://www.infotuts.com/cascaded-dropdown-jquery-ajax-php/

People are also looking for solutions to the problem: Can i use three "OR" logical operators for comparing with one variable in PHP

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.