I want to load ajax resonse data into dropdown list. I have one dropdown list on my page. I just want to load ajax response data which will contain list of options into dropdown list.
This is my dropdown.
<select title="Basic example" id="muliSelect6" class="multipleCheckbox" multiple="multiple" name="example-basic6[]" size="5">
</select>
I am using the following ajax script :
$.ajax({
url: "GetPerPersonData.php",
type: "POST",
data: {
building: $('#muliSelect1').val(),wing:$('#muliSelect3').val()
},
success: function(data)
{
$("#muliSelect6").html('');
$("#muliSelect6").html(data);
}
});
I am getting the response as a list of options as following
<option value="yogesh">Yogesh kale</option>
But it does not get loaded in dropdown list. So please help me in getting the output correctly.
I want to load ajax resonse data into dropdown list. I have one dropdown list on my page. I just want to load ajax response data which will contain list of options into dropdown list.
This is my dropdown.
<select title="Basic example" id="muliSelect6" class="multipleCheckbox" multiple="multiple" name="example-basic6[]" size="5">
</select>
I am using the following ajax script :
$.ajax({
url: "GetPerPersonData.php",
type: "POST",
data: {
building: $('#muliSelect1').val(),wing:$('#muliSelect3').val()
},
success: function(data)
{
$("#muliSelect6").html('');
$("#muliSelect6").html(data);
}
});
I am getting the response as a list of options as following
<option value="yogesh">Yogesh kale</option>
But it does not get loaded in dropdown list. So please help me in getting the output correctly.
$("#muliSelect6").empty();
– Awlad Liton
Commented
Feb 22, 2014 at 18:38
Use append instead of HTML
$('#multiSelect6').append(data);
var dropdown=$('#multiSelect6');
dropdown.empty();
$('#multiSelect6').append(data);
this is the way you can clear dropdown data before loading.
As an alternative, you can return your data as JSON payload (this might be better option that returning raw HTML) and directly load JSON data into the dropdown:
success: function(data) {
$("multiSelect6").view(data)
}
You would need to download this library https://github./JocaPC/jquery-view-engine/tree/master/src . Take a look at this https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown for more details.
Here is the My code,it worked fine.
function changeVal(){
var name = $('select#pany').val();
$.post('myActionForm.do?parameter=getMOLCodesList', {
userName : name
}, function(response) {
var select = $('#molcode');
select.find('option').remove();
$.each(response, function(index,value) {
$('<option>').val(value).text(value).appendTo(select);
});
}); }
In java am getting the MOL Codes from DB and i am assigning to DROP Down. please make a note on it..its struts class(DispatchAction).
public ActionForward getMOLCodesList(ActionMapping mapping,ActionForm fm, HttpServletRequest request,HttpServletResponse response)throws Exception { ArrayList molList = new ArrayList();
String panyname = request.getParameter("userName");
String json = null;
System.out.println("pany name is"+panyname);
connection = (SybConnection)getXchgConnect();
if(panyname!=null && !(panyname.equalsIgnoreCase(""))) {
System.out.println("Hello,i am from MOL codes");
cstmt1 = connection
.prepareCall("{call allied.dbo.p_getMOLcodes(?)}");
cstmt1.setString(1, panyname);
molCodes = cstmt1.executeQuery();
while (molCodes.next()) {
molList.add(molCodes.getString("MOLCode").trim());
}
System.out.println("Mol lIst size is-->"+molList.size());
response.setContentType("text/plain");
json = new Gson().toJson(molList);
response.setContentType("application/json");
response.getWriter().write(json);
if(connection!=null && molCodes!=null) {
connection.close();
molCodes.close();
}
}
//return mapping.findForward("wele1");
return null;
}
<div align="center"
style="border: 2px solid LightGreen; padding: 12px; font-size: 12px; width: 1050px">
Company Name <select id="pany" name="panyList"
style="border: 2px solid LightGreen; font-size: 12px; width: 138px;"
onchange="changeVal(this.value)">
<option selected value="default">--Select Company Name--</option>
<c:forEach var="item" items="${paniesList}">
<option value="${item}">${item}</option>
</c:forEach>
</select> MOLCode<select id="molcode" name="mol"
style="border: 2px solid LightGreen; font-size: 12px; width: 138px;">
<!-- <option selected value="default">--Select--</option>
<option value="835725">835725</option>
<option value="54322">54322</option> -->
<option selected value="default">Select MOLCode</option>
</select> Month<select id='gMonth1' name="month">
<option selected value="12">--Select Month--</option>
<option value='0'>Janaury</option>
<option value='1'>February</option>
<option value='2'>March</option>
<option value='3'>April</option>
<option value='4'>May</option>
<option value='5'>June</option>
<option value='6'>July</option>
<option value='7'>August</option>
<option value='8'>September</option>
<option value='9'>October</option>
<option value='10'>November</option>
<option value='11'>December</option>
</select> Year<input type="text" name="year" id="year" style="font-size: 10px" maxlength="4"
placeholder="Enter a valid Year"
onkeypress="return isNumber(event)"
onblur="return checkyear(this.value)">
<input type="submit" value="submit"
style="font-size: 7pt; color: white; background-color: green; border: 2px solid #336600; padding: 3px"/>
<!-- <input type="button" value="submit"
style="font-size: 7pt; color: white; background-color: green; border: 2px solid #336600; padding: 3px"
onclick="return checkyear(this.value),getCustomers()"/> -->
<input type="RESET" value="Reset" style="font-size: 7pt; color: white; background-color: green;
border: 2px solid #336600; padding: 3px" />
Hope This will be helpfull to someone.