如何实现下拉框可以编辑

     该组件很智能，这个其实就是文本框和下拉框的组合，当你点击最右边的下拉按钮会实现下拉框的功能，当你选中文本框是文本框的功能，将文本框和下拉框设置name属性一样他自动会把对应下拉框的值传入后台，而文本框的值不传，当你做文本框使用它会吧文本框的值传入后台而下拉框的值不传。

效果图

做是文本框



做下拉框



1.引进js

<link href="<%=basePath%>/system/js/magic-suggest/magicsuggest-1.3.1-min.css" rel="stylesheet" />

    <script src="<%=basePath%>/system/js/magic-suggest/magicsuggest-1.3.1-min.js"></script>

2.对应文本的js

 <div class="col-xs-3 bg-white">
               <span>City:</span>
           </div>
<div class="col-xs-9 bg-white">
              <div id="ms7" class="ms-ctn" >
<div id="ms-trigger-5" class="ms-trigger" onclick="showDiv();"><div class="ms-trigger-ico"></div></div>
<div class="ms-helper " ></div>
<div id="ms-sel-ctn-5" class="ms-sel-ctn">
<input id="ms-input-5" name="cityid" type="text" value="${customeraddress.cityid}" placeholder="Type or click here" />
<input type="hidden" id="cityNameValue" />
<input type="hidden"  id="selectName" value=""/>
</div>
<div id="ms-res-ctn-0" class="ms-res-ctn"  >
</div>
</div>
               <span id="cityMsg"></span>
           </div> 

3.请求数据的js

function showDiv(){

                                var flag = $("#ms-res-ctn-0").css("display");

                                

                                if(flag == "block"){

                                     $("#ms-res-ctn-0").css("display","none");

                                }else{

                                    $("#ms-res-ctn-0").css("display","");

                                    loadChildren();

                                }

                            }

                            

                            

                            function loadChildren(){

                                var CountryID = $("#countryId2").val();

                                 $.ajax({

                                            async:true,

                                            cache:false,

                                            type:"POST",

                                            url:"${pageContext.request.contextPath}/agent/findCityList",

                                            data:{CountryId:CountryID},

                                            success: function(data){

                                                            $("#ms-res-ctn-0").empty();

                                                            for(var i=0; i<data.length; i++){

                                                                var div = "<div class='ms-res-item' onclick='selectCity("+data[i].cityid+','+'this'+");' >"+data[i].citycode+"</div>";

                                                                $("#ms-res-ctn-0").append(div);

                                                            }

                                            }

                                    });

                            }

            function selectCity(cityid,code){
          var citycode = code.innerHTML;
          $("#ms-res-ctn-0").css("display","none");
          $("#ms-input-5").val(citycode);
          $("#ms-input-5").attr("name","");
      $("#selectName").val(cityid);
      $("#selectName").attr("name","cityid");

            }