I want to load ajax response data into dropdown

Question

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.

yes...ok...but I want to clear dropdown before loading options into it...then what should i use? — Yogesh k
– Yogesh k, Commented Feb 22, 2014 at 18:50

bart2puck · Accepted Answer · 2014-02-22 22:47:15Z

4

Use append instead of HTML

 $('#multiSelect6').append(data);

answered Feb 22, 2014 at 22:47

bart2puck

2,5203 gold badges33 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yogesh k Over a year ago

can you please tell me how to clear dropdown list before loading data...?

bart2puck Over a year ago

its been 2 years since you asked this question but for posterity. $('#multiSelect6).empty();

Aman Attari · Accepted Answer · 2016-01-13 22:44:20Z

1

var dropdown=$('#multiSelect6');
dropdown.empty();
$('#multiSelect6').append(data);

this is the way you can clear dropdown data before loading.

answered Jan 13, 2016 at 22:44

Aman Attari

1913 silver badges12 bronze badges

Comments

Jovan MSFT · Accepted Answer · 2017-12-09 10:41:29Z

0

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.com/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.

answered Dec 9, 2017 at 10:41

Jovan MSFT

14.8k4 gold badges44 silver badges59 bronze badges

Comments

Pradeep · Accepted Answer · 2017-07-06 13:39:01Z

Here is the My code,it worked fine.

List item

Jsp AJAX:

function changeVal(){

    var name = $('select#company').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);

     }); 


    }); }

My Java class code:

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 companyname = request.getParameter("userName");

    String json = null;
    System.out.println("company name is"+companyname);

    connection = (SybConnection)getXchgConnect();

    if(companyname!=null && !(companyname.equalsIgnoreCase(""))) {

        System.out.println("Hello,i am from MOL codes");

        cstmt1 = connection
                .prepareCall("{call allied.dbo.p_getMOLcodes(?)}");

        cstmt1.setString(1, companyname);
        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("welcome1"); 
    return null;
}

Jsp Page:

        <div align="center"
            style="border: 2px solid LightGreen; padding: 12px; font-size: 12px; width: 1050px">

            Company Name <select id="company" name="companyList"
                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="${companiesList}">
                    <option value="${item}">${item}</option>
                </c:forEach>

            </select>&nbsp;&nbsp; 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> &nbsp;&nbsp; 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> &nbsp;&nbsp; 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)"> &nbsp;&nbsp; 
                <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()"/> -->
            &nbsp;&nbsp;  <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.

List item

Collectives™ on Stack Overflow

I want to load ajax response data into dropdown

4 Answers 4

2 Comments

Comments

Comments

Jsp AJAX:

My Java class code:

Jsp Page:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Jsp AJAX:

My Java class code:

Jsp Page:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related