如何在下拉列表中插入默认项并使用 jQuery 和 Ajax 禁用它答案

【问题标题】：How to insert a default item in drop down and disable it using jQuery and Ajax如何在下拉列表中插入默认项并使用 jQuery 和 Ajax 禁用它
【发布时间】：2017-05-25 14:27:58
【问题描述】：

我有 3 个下拉列表，在选择第一个下拉列表的值后，我使用 jQuery 和 ajax 填充第二个下拉列表。我想要的是为第二个下拉菜单设置一个默认项，例如 Select a value。

这是我的jsp：

<!DOCTYPE HTML>

<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="assets/css/main.css" />
        <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
        <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
        </script>

        <script type = "text/javascript">
         $(document).ready(function (){ 
             $(".dropdown").change(function(event){
                 var name = $("#doctype").val();
                 $.ajax({
                     url:'ServiceToFetchSubType',
                     data: {name:name},
                     type:'post',
                     cache:false,
                     success: function(response){

                         var select = $('#docsubtype');
                         select.find('option').remove();
                         $.each(response, function(index, value){
                             $('<option>').val(value).text(value).appendTo(select);
                         });
                         callback.apply(select);
                     }


                 });


             });         


         });
      </script>
      <script type="text/javascript">
      $(document).ready(function (){
          $(".dropdown1").change(function(event){
              var name = $("#doctype").val();
              var name2 = $("docsubtype").val();
              $.ajax({
                  url: 'ServiceToFetchDocUnit',
                  data: {"name":name, "name1":name2},
                  type: 'post',
                  cache: false,
                  success: function(response)
                  {
                     var select = $('#docunit');
                     select.find('option').remove();
                     $.append($('<option>',{value: -1, text: "Select Doc Subtype"}))
                     $.each(response, function(index, value){
                         $('<option>').val(value).text(value).appendTo(select);
                     });
                     callback.apply(select);

                  }
              });
          });

      });
      </script>


    </head>
    <body>

        <!-- Wrapper -->
            <div id="wrapper">

                <!-- Header -->
                    <header id="header">

                        <div class="content">
                            <div class="inner">
                                <h1>Drop Down Menu</h1>
                                <div class="dropdown">
                                <select name="doctype" id="doctype" class="my_dropdown" style="color:white; background:#655D78">
                                    <option disabled="disabled" selected="selected">Select Doc Type</option>
                                    <c:forEach items="${bt}" var="doctypes">
                                     <option><c:out value="${doctypes}"/></option>
                                    </c:forEach>
                                </select>
                                </div>
                                <div class="dropdown1">
                                <select name="doctype" id="docsubtype" class="my_dropdown1" style="color:white; background:#655D78">
                                    <option disabled="disabled" selected="selected">Select Doc SubType</option>
                                    <option></option>
                                </select>
                                </div>
                                <div class="dropdown2">
                                <select name="doctype" id="docunit" class="my_dropdown2" style="color:white; background:#655D78">
                                    <option disabled="disabled" selected="selected">Select Doc Unit</option>
                                    <option></option>
                                </select>
                                </div>
                            </div>
                        </div>

                    </header>


                <!-- Main -->


                <!-- Footer -->
                    <footer id="footer">
                        <p class="copyright">&copy; Design: Content Management OPS</p>
                    </footer>

            </div>

        <!-- BG -->
            <div id="bg"></div>

    <!-- Scripts -->
            <script src="assets/js/jquery.min.js"></script>
            <script src="assets/js/skel.min.js"></script>
            <script src="assets/js/util.js"></script>
            <script src="assets/js/main.js"></script>

    </body>
</html>

我对 jQuery 和 AJAX 还很陌生，感谢任何形式的帮助。提前致谢。

【问题讨论】：

$("#docsubtype")[0].options.length=1 将保留第一个选项并删除其余选项 - 使用它而不是 select.find("options").remove
@mplungjan “删除其余部分”是什么意思？对不起，我没有得到你。我想要的是然后有下拉列表
我知道。试试我的代码。它将保留您在 HTML 中编写的内容，而您的附加内容只会在其后添加新内容。

标签： javascript jquery ajax jsp

【解决方案1】：

添加

$('<option value="">Select a value</option>').appendTo(select);

之前

$.each(response, function(index, value){

【讨论】：

@Zeus07 很高兴为您提供帮助:):)

【解决方案2】：

要在添加新选项之前保留第一个选项，只需更改

select.find('option').remove(); 到

select[0].options.length=1;

这将在新的追加离开之前删除从第二个到最后的所有选项

<option disabled="disabled" selected="selected">Select Doc SubType</option>

【讨论】：