是否有更好的方法在javascript中创建连接的下拉菜单

时间:2019-05-08 10:17:13

标签: javascript html css api dom

从第一个下拉菜单中选择一个选项时,该选项将从列表中删除,并且在第二个下拉列表中将不再可用。
如果从第二个下拉菜单中选择了新元素,则第三个下拉菜单将不再可用。

例如:

Successfully loaded Appfile at path '/Users/xx/Workspace/yy/ci/zz/fastlane/Appfile'
-------
Successfully loaded Appfile at path '/Users/xx/Workspace/yy/ci/zz/fastlane/Appfile'
-------
WARN [2019-05-31 03:15:16.70]: You have required a gem, if this is a third party gem, please use `fastlane_require 'match'` to ensure the gem is installed locally.
INFO [2019-05-31 03:15:17.00]: ------------------------------
INFO [2019-05-31 03:15:17.00]: --- Step: default_platform ---
INFO [2019-05-31 03:15:17.00]: ------------------------------
INFO [2019-05-31 03:15:17.01]: Driving the lane 'mac test' 
INFO [2019-05-31 03:15:17.01]: Encrypting git!
INFO [2019-05-31 03:15:17.01]: Cloning remote git repo...
INFO [2019-05-31 03:15:17.01]: $ git clone ./../gitrepo/.git /var/folders/7s/s7248n8j0yz0lth821hx4bdm0000gp/T/d20190531-95641-60lael -b master --single-branch
INFO [2019-05-31 03:15:17.02]: ▸ Cloning into '/var/folders/7s/s7248n8j0yz0lth821hx4bdm0000gp/T/d20190531-95641-60lael'...
INFO [2019-05-31 03:15:17.13]: ▸ done.
INFO [2019-05-31 03:15:17.15]:   Successfully decrypted certificates repo
INFO [2019-05-31 03:15:17.15]:   Successfully encrypted certificates repo
INFO [2019-05-31 03:15:17.15]: Pushing changes to remote git repo...
INFO [2019-05-31 03:15:17.15]: $ git add /var/folders/7s/s7248n8j0yz0lth821hx4bdm0000gp/T/d20190531-95641-60lael/match_version.txt
INFO [2019-05-31 03:15:17.17]: $ git add /var/folders/7s/s7248n8j0yz0lth821hx4bdm0000gp/T/d20190531-95641-60lael/out.txt
INFO [2019-05-31 03:15:17.19]: $ git commit -m \[fastlane\]\ Updated\ \ and\ platform\ 
INFO [2019-05-31 03:15:17.24]: ▸ [master 6bdc078] [fastlane] Updated  and platform
INFO [2019-05-31 03:15:17.25]: ▸ 1 file changed, 1 insertion(+), 1 deletion(-)
INFO [2019-05-31 03:15:17.25]: $ git push origin master
INFO [2019-05-31 03:15:17.31]: ▸ Enumerating objects: 5, done.
INFO [2019-05-31 03:15:17.31]: ▸ Counting objects: 100% (5/5), done.
INFO [2019-05-31 03:15:17.31]: ▸ Delta compression using up to 8 threads.
INFO [2019-05-31 03:15:17.31]: ▸ Compressing objects: 100% (2/2), done.
INFO [2019-05-31 03:15:17.32]: ▸ Writing objects: 100% (3/3), 289 bytes | 144.00 KiB/s, done.
INFO [2019-05-31 03:15:17.32]: ▸ Total 3 (delta 1), reused 0 (delta 0)
INFO [2019-05-31 03:15:17.37]: ▸ To /Users/xx/Workspace/yy/ci/zz/fastlane/./../gitrepo/.git
INFO [2019-05-31 03:15:17.37]: ▸ cac225c..6bdc078  master -> master
INFO [2019-05-31 03:15:17.37]: Finished uploading files to Git Repo [./../gitrepo/.git]
INFO [2019-05-31 03:15:17.44]: Successfully generated documentation at path '/Users/xx/Workspace/yy/ci/zz/fastlane/README.md'

+------+------------------+-------------+
|           fastlane summary            |
+------+------------------+-------------+
| Step | Action           | Time (in s) |
+------+------------------+-------------+
| 1    | default_platform | 0           |
+------+------------------+-------------+

INFO [2019-05-31 03:15:17.45]: fastlane.tools finished successfully 

这是我想出的代码,但是有更干净的方法吗?

HTML:

drop_down1: Dog
            cat
            mouse -->selected
            lion

drop_down2: Dog-->selected
            cat
            lion


drop_down3: cat
            lion

JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Ghibli App</title>

    <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <div id="root"></div>
    <select id="sel1"  onchange="show1(this)">
      <option value = "">--Select--</option>   
    </select>
    <select id="sel2"  onchange="show2(this)" >
      <option value = "">--Select--</option>  
    </select>
    <select id="sel3"  onchange="show3(this)">
      <option value = "">--Select--</option>
  </select>
  <select id="sel4">
    <option value = "">--Select--</option>
</select>
    <script src="script.js"></script>
  </body>
</html>

0 个答案:

没有答案