CODEWITHSUNDEEP
javascriptphpjqueryajaxdrop-down-menu
Yogesh k
Yogesh k

Reputation: 352

I want to load ajax response data into dropdown

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.

Upvotes: 1

Views: 7762

Answers (4)

Jovan MSFT
Jovan MSFT

Reputation: 14660

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.

Upvotes: 0

Pradeep
Pradeep

Reputation: 1

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:

  1.         <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

Upvotes: -1

Aman Attari
Aman Attari

Reputation: 191

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

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

Upvotes: 1

bart2puck
bart2puck

Reputation: 2522

Use append instead of HTML

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

Upvotes: 4

Related Questions