Why width of dropdown is decreasing automatically on every select?
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 :
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 :
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 :
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>