3級下拉框聯動

阿新 • • 發佈：2019-02-12

效果圖：

下面看程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
      <select id="virus_findby" class="form-control" name="virus_findby"  onchange="SlectLinkMove()">        
                <option selected value="NoDistinguish">不區分</option> <!--NoDistinguish -->
                <option value="Scan">aa</option>       <!--Scan -->
                <option value="GFile">bb</option>  <!--GFile -->
                <option value="GWeb">cc</option>     <!--GWeb -->
                <option value="GSmtp">dd（傳送）</option>  <!--GSmtp -->
                <option value="GPop3">cc（接收）</option>   <!--GPop3 -->
      </select>
      <span class="target_source_modual" style="display: none;">目標來源: </span>
      <select id="target_source" class="form-control target_source_modual" name="target_source" style="width: 100px;display: none;">
                <option selected value="20">不區分</option>  <!--NoDistinguish -->
                <option value="21">aa</option> <!--MobileDevices -->
                <option value="22">bb</option>  <!--HardDisk -->
                <option value="23">cc</option>  <!--NetSharing -->
                <option value="24">dd</option>   <!--LightDisk -->
                <option value="25">eee</option>  <!--VSuiteRamdisk -->
      </select>
      <span class="">處理結果: </span>
      <select id="cmpResult" name="cmpResult" class="form-control">
                <option value="NoDistinguish">不區分</option>
      </select>
  </body>
</html>
<script src="jquery.min.js" type="text/javascript"></script>
<script>
   function SlectLinkMove() {
        var TreatmentTypeSelect = $("#virus_findby"); //處理型別1111
        var TreatmentResultSelect = $("#cmpResult");   //處理結果
        var add_option;
         var add_value;
         if(TreatmentTypeSelect.val() == "NoDistinguish"){
             $(".target_source_modual").css("display","none");
             add_option = ["不區分"];
             add_value=["NoDistinguish"]
         }
        else if (TreatmentTypeSelect.val() == "Scan") {
             $(".target_source_modual").css("display","none");
            add_option = ["不區分", "aa", "bb", "cc", "dd", "cc", "ee", "ff", "hh"];
             add_value=["NoDistinguish","FindVirus","ClearVirus","ClearFail","ReStartClear","ContainClearVirus","DeleteVirus","DeleteFail","ReStartDelete"]
        }
         else if (TreatmentTypeSelect.val() == "GFile") {
            add_option = ["ar", "dd", "rr", "禁止訪問"];
              add_value=["NoDistinguish","Delete","Clear","ForbidAccess"];
            $(".target_source_modual").css("display","");
        }
         else if (TreatmentTypeSelect.val() == "GWeb") {
            add_option = ["不區分"];
              add_value=["NoDistinguish"]
            $(".target_source_modual").css("display","none");
        }
         else if (TreatmentTypeSelect.val() == "GSmtp") {
            add_option = ["不區分"];
              add_value=["NoDistinguish"]
            $(".target_source_modual").css("display","none");
        }
         else if (TreatmentTypeSelect.val() == "GPop3") {
            add_option = ["不區分"];
              add_value=["NoDistinguish"]
            $(".target_source_modual").css("display","none");
        }

        TreatmentResultSelect.empty();
        for (var i = 0; i < add_option.length; i++) {
            var ot = new Option();
            ot.text = add_option[i].split()[0];
            ot.value = add_value[i].split()[0]
            TreatmentResultSelect.append(ot);
        }
    }
</script>

這兒有個地方要注意，在設定初始select時需要給option設定一個預設的選擇項，就像這樣，否則聯動效果出不來。

<option selected value="NoDistinguish">不區分</option> <!--NoDistinguish -->

3級下拉框聯動

效果圖：下面看程式碼： <!DOCTYPE html> <html> <head> <title></title> </head> <body> <

jQuery easyUI combobox下拉框聯動級聯

新做了一個下拉框聯動的小功能，網上找的是省市級聯，之前也套用了，這次是自定義的一個級聯，相當於父子關係，有如下兩張表：表A：（分類表）（相當於主選單）表B：（目錄表）（相當於子選單）注

基於JQuery的Select下拉框下拉框聯動（級聯）

這段時間在指導學生完成實訓專案，由一個用到了JQuery進行下拉框（select）聯動（新增刪除option）的操作，本來在上課中都是講過的，但時間一長都忘光了，下面把這段簡單的JS貼出來，給入門者一個DEMO吧，以後有學生不會寫的時候他能到這找到參考。程式碼要點： 1、

Easyui多個下拉框聯動效果

code this .com cti 下拉框聯動 reload tex count 多個好久沒寫前端了，以前在做多級聯動的時候，用的是easyui的tree結構，但是需要一次性全部加載，不是按需加載，性能不好，退而求其之，用多個下拉框做 eayui的combobox 有

ASP.NET MVC下拉框聯動

這個case主要是我在做專案的時候遇到一個需要根據input控制元件輸入的內容，動態填充dropdown list中的內容，實現二者聯動的需求。在搜尋了一些資源後，這篇部落格解決了我的問題，所以記錄並轉載一下。轉載自： https://www.jb51.net/article/88986.htm 資料

Ajax 的同步和非同步，下拉框聯動回顯第二個不能回顯成功

Ajax 的同步和非同步，下拉框聯動回顯第二個不能回顯成功示例：使用Ajax 實現下拉框聯動回顯出現呢只有第一個能夠回顯成功其餘的都不能正常回顯。原因：使用了Ajax的非同步 select的賦值再非同步之前導致的 ( 賦值前個彈出可以暫停賦值的執行順序先載入後賦值 )

高階查詢元件下拉框聯動（三）

實現下拉框聯動例子. 1.首先在ul中定義省份和城市查詢條件。 <ul id="dynamicCondition" style="display:none;"> <li field="DynamicCondition.province" title="省份"

CSS——初做網頁的小心得--下拉框聯動

學習做前端用了半年的時間，學完之後，並沒有真正的去用它，也不知道怎麼去使用這些技術。半年後，一個偶然的機會，我們社團要做一個小官網，也是學生自己搞的，起初很興奮，也很擔心自己的技術只是皮毛，但是還是同意了。果然在製作的時候遇到很多障礙，下拉框之間的聯動效果。

Ajax提高篇（7）Ajax實現簡單的下拉框聯動顯示資料

頁面中的兩個下拉列表框：<tr> <td style="width: 130px"> 所在學院：</td> <td styl

easyui 下拉框聯動

$("#supplierCode").combobox({onChange: function (n,o) {var supplierCodes= n.join(",");$.ajax({type:"post",url:'${pageContext.request.con

多個下拉框聯動及回顯（Jquery）

應用場景如下：程式碼實現如下： <%@ page contentType="text/html;charset=UTF-8" import="java.util.*" language="java" %> <%@ include file="

ajax+js+java實現頁面下拉框聯動

jsp程式碼： <%-- 第一級下拉 --%> <select id="channelId" onchange="getChlProduct()" name="channelId" style="width:100px" > <option

vue select 下拉框聯動

（1）三個下拉框，第二個和第三個都需要第一個下拉框的資料id才能通過介面請求到資料（2）遇到的問題，二、三下拉框的資料更新不同步（3）滑鼠點選二次才能將下拉框彈出 <template> <ul class="h45"> <li

JavaScript Ajax Json實現上下級下拉框聯動效果例項程式碼

最近嘗試做出一個部門和人員的下拉框聯動功能，部門和人員的對應關係是1:N 程式碼如下: <div class="forntName">部門</div> <div class="inpBox"> <select name="d

Excel下拉框聯動中的事件

最近專案中用到這個，自己研究了半天聯動自己百度 Private Sub Worksheet_Change(ByVal Target As Range) Dim Rng As Range

js實現下拉框聯動選中日期（select 日期聯動更改）

html程式碼 <head> <script type="text/javascript" src="/js/jquery-1.11.1.min.js" ></script> <script type="text/javascr

html年月日下拉聯動選單年月日三下拉框聯動

<html> <head> <title>年月日三下拉框聯動</title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>

Python中tkinter中控件的使用（3.Combobox下拉框）

text var port inter select 默認值 bin pytho ren import tkinterfrom tkinter import ttkwin = tkinter.Tk()win.title("Combobox下拉框")win.geometry(

關於layui框架下拉框省市兩級聯動

廢話不多說，直接進入正題第一步，引入相關檔案，具體請移步layui官網文件（https://www.layui.com/doc/）第二步，在使用下拉框之前，需要在JS宣告form模板 layui.use('form', function(){ var form = lay

兩級聯動下拉框的簡單實現

最近經常用到二級選單的情況，改變一個另一個跟著變化。自己寫了一個簡單的JSP頁面，大家給點意見，另外大家這種情況都是怎麼做的，當然Ajax除外！[code]<%! public final String _JS_GET_METHOD_NAME="_do_get_seco

3級下拉框聯動

相關推薦