我想将ajax响应数据加载到下拉列表中

Question

我想将ajax共振数据加载到下拉列表中。 我的页面上有一个下拉列表。 我只想将包含选项列表的ajax响应数据加载到下拉列表中。

这是我的下拉列表。

<select title="Basic example" id="muliSelect6" class="multipleCheckbox" multiple="multiple" name="example-basic6[]" size="5">

</select>

我使用以下ajax脚本：

         $.ajax({
                url: "GetPerPersonData.php",
                type: "POST",
                data:           {
             building: $('#muliSelect1').val(),wing:$('#muliSelect3').val()

            },
                success: function(data) 
                    {
               $("#muliSelect6").html('');  
                       $("#muliSelect6").html(data);
                    }

            });

我将响应列为以下选项列表

<option value="yogesh">Yogesh kale</option>

但它不会在下拉列表中加载。 所以请帮我正确输出输出。

Answer 1

使用append而不是HTML

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

Answer 2

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

这是您在加载前清除下拉数据的方法。

Answer 3

作为替代方案，您可以将数据作为JSON有效负载返回（这可能是返回原始HTML的更好选项）并直接将JSON数据加载到下拉列表中：

success: function(data) {
    $("multiSelect6").view(data)
}

您需要下载此库https://github.com/JocaPC/jquery-view-engine/tree/master/src 。 有关更多详细信息，请查看此https://jocapc.github.io/jquery-view-engine/docs/ajax-dropdown 。

Answer 4

这是我的代码，它工作正常。

• 项目清单

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);

     }); 


    }); }

我的Java类代码：

在java中我从DB获取MOL代码，我正在分配DROP Down。 请记下它.. struts类（DispatchAction）。

public ActionForward getMOLCodesList（ActionMapping mapping，ActionForm fm，HttpServletRequest request，HttpServletResponse response）抛出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页面：

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; 填充：3px“/>
   

希望这对某人有所帮助。

• 项目清单