> 웹 프론트엔드 > JS 튜토리얼 > 보조 연결을 달성하려면 js에서 동적 렌더링 코드를 선택하세요.

보조 연결을 달성하려면 js에서 동적 렌더링 코드를 선택하세요.

不言
풀어 주다: 2018-08-25 10:15:24
원래의
2206명이 탐색했습니다.

이 기사는 2차 연결을 달성하기 위해 js에서 동적 렌더링을 선택하는 방법에 대한 코드를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

다음은 HTML 코드의 일부입니다

<div class="layui-form-item layui-row layui-col-space5">
  <div class="layui-col-md6">
  <label class="layui-form-label">一级分类</label>
  <div class="layui-input-block layui-select-block">
    <select name="oaalFtype" id="oaalFtype" lay-filter="oaalFtype"></select>
      </div>
  </div>
  <div class="layui-col-md6">
  <label class="layui-form-label">二级分类</label>
    <div class="layui-input-block layui-select-block">
     <select name="oaalStype" id="oaalStype" lay-filter="oaalStype"></select>
      </div>
  </div>
  </div>
로그인 후 복사

다음은 js

layui.use([&#39;element&#39;, &#39;form&#39;, &#39;layer&#39;], function(){
var $ = layui.jquery
,element = layui.element
,form = layui.form
,layer = layui.layer;
//初始化下拉框
function initSelect(id,url){
$.post(url,function(result){
var data = result.data;
var arr = new Array();
arr.push("<option value=&#39;&#39;>请选择</option>");
$.each(data, function(i,item){
var t = item.text, v = item.value, option = "<option value=&#39;"+v+"&#39;>"+t+"</option>";
arr.push(option);
})
$("#"+id).empty();
$("#"+id).append(arr.join(""));
form.render(&#39;select&#39;);
})
}
//表单提交
form.on(&#39;submit(save)&#39;,function(data){
var options = {
            url: "${mbase}/saveOaAssetlib.do",
            type: "POST",
            success: function (data) {
                if(data.success){
                layer.alert(data.messages[0],{icon: 1},function(){
                window.close();
                    window.opener.location.reload();
                });
                }
            }
    };
    $("#formData").ajaxSubmit(options);
})
//一级分类
var oaalFtype = "${base}/risen/pub/dictCombo.action?uuid=/DICT/OA/ASSETLIB/FTYPE&TYPE=jsn_grid";
initSelect("oaalFtype",oaalFtype);
//批次
var oaalBatch = "${base}/risen/pub/dictCombo.action?uuid=/DICT/OA/ASSETLIB/BATCH&TYPE=jsn_grid";
initSelect("oaalBatch",oaalBatch);
//监控一级分类
form.on(&#39;select(oaalFtype)&#39;, function(data){//2级联动
//二级分类初始化
var oaalStype = "${base}/risen/pub/dictCombo.action?uuid=/DICT/OA/ASSETLIB/FTYPE/"+encodeURI(data.value)+"&TYPE=jsn_grid";
initSelect("oaalStype",oaalStype);
}); 
});
로그인 후 복사

의 일부입니다. 관련 권장 사항:

js HTML에서 공유하는 Select Secondary Linkage 예제 구현

Select Secondary Linkage의 AngularJS 구현 드롭다운 메뉴 단계별 설명

위 내용은 보조 연결을 달성하려면 js에서 동적 렌더링 코드를 선택하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿