I have two dropdowns. On selection of a value in one dropdown, corresponding value from an XML file should come in dropdown2. Corresponding value is coming perfectly in dropdown2 but its width is getting reduced every time I select value in dropdown 1. I am not getting what really the problem is. Please help me out with this.
Script Code :
var XML_PATH = "web/jsp/test.xml";
$(function getDropThreeDetails() {
$('#ddl3').empty();
$.ajax({
        type: "GET",
        url: XML_PATH,
        dataType: "xml",
        success: function(xml)
        {
            var selectedVal = $('#ddl2').val();
            $(xml).find(selectedVal).find('values').each(function(i)  {
                var ou2 = $(this).text();
                $('#ddl3').append("<option id='"+ ou2 +"'>"+ou2+"</option>");
            });
 
    }
  });
});

HTML Code :

 <td class="text1" align="left" colSpan="1"><b><font
        color="#5B5B5B" face="Arial">Service Request Category</font></b></td>
    <td><select id="ddl2"
        onchange="getDropThreeDetails(this,'ddl3')" style="width: 100%"
        Class="textbox">
    </select></td>
</tr>
 
<tr>
    <td class="text1" align="left" colSpan="1"><b><font
        color="#5B5B5B" face="Arial">Service Request Type</font></b></td>
    <td><select id="ddl3" style="width: 100%" Class="textbox">
    </select></td>
</tr>
XML File Code :

<Statements>
    <values>Request for Final Interest certificate</values>
    <values>Request for Provisional Interest certificate</values>
    <values>Request for Amortization/Repayment Schedule for ROI/Balance tnure and o/s loan amt</values>
    <values>Statement of account</values>
    <values>Query on Statement/Certificates/Amortization chart</values>
</Statements>
 
<Disbursement>  
    <values>Part Payment Enquiry</values>
    <values>Part Payment Request</values>
    <values>Query on Part Payment request made</values>
    <values>Part Payment not Adjusted Properly</values> 
</Disbursement>