如何实现下拉框可以编辑

时间：2022-11-21 18:00:33

该组件很智能，这个其实就是文本框和下拉框的组合，当你点击最右边的下拉按钮会实现下拉框的功能，当你选中文本框是文本框的功能，将文本框和下拉框设置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");
}

标签：如何实现下拉框 javaee

相关文章

