Question

我的问题是如果我选择的第一个下拉值是Courier

，如何进行第二次下拉显示

首先，用户必须选中复选框以显示第一个下拉列表，这是我的代码

  <p> <input  type="checkbox" id="contract" class="icheckbox_flat-green" onclick="myFunctionCons()"> Contract </p>

一旦选中，此合约将通过下拉列表（第一个下拉列表）显示

<select id="contractvia" style="display:none" class="form-control">
              <option value="0">Via..</option>
              <option value="1">Email</option>
              <option value="2">FB Messenger</option>
              <option value="3">Courier</option>
              <option value="4">Others..</option>
 </select>

我的目标是在contractvia选择的选项为Courier
后显示第二个下拉列表

<select id="contractCourier" style="display:none" class="form-control">
               <option value="">Courier</option>
               <option value="scanned">Scanned</option>
               <option value="net">Original</option>
               <option value="mouth">Photocopy</option>
</select>

使用此代码检查复选框后显示第一个下拉列表的第一个任务是在第一个下拉列表的选定选项为“Courier”时显示第二个下拉列表

<script>
function myFunctionCons() {
    var con = document.getElementById("contract");
    var conv = document.getElementById("contractvia");
    var conc = document.getElementById("contractCourier");
    if (con.checked == true) {
        conv.style.display = "block";
    } else {
        conv.style.display = "none";
    }
    if ($("#contractvia").val() == 3)
        conc.style.display = "block";
    else
        conc.style.display = "none";
}   
</script>

Answer 1

请在Vanilla Javascript中查看此内容

{
  "name": "functions",
  "scripts": {
    "build": "./node_modules/.bin/tslint -p tslint.json && ./node_modules/.bin/tsc",
    "serve": "npm run build && firebase serve --only functions",
    "shell": "npm run build && firebase experimental:functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --non-interactive --token $FIREBASE_DEPLOY_KEY",
    "logs": "firebase functions:log"
  },
  "main": "lib/index.js",
  "dependencies": {
    "@google-cloud/storage": "^1.6.0",
    "@google-cloud/vision": "^0.15.2",
    "@sendgrid/mail": "^6.2.1",
    "@types/algoliasearch": "^3.24.9",
    "algoliasearch": "^3.24.9",
    "child-process-promise": "^2.2.1",
    "express": "^4.16.2",
    "firebase-admin": "^5.8.1",
    "firebase-functions": "^0.8.1",
    "jsonwebtoken": "^8.1.1",
    "lodash": "^4.17.5",
    "piexifjs": "^1.0.3",
    "rand-token": "^0.4.0",
    "raven": "^2.4.0",
    "raven-js": "^3.22.1",
    "request": "^2.83.0"
  },
  "devDependencies": {
    "tslint": "^5.8.0",
    "typescript": "^2.5.3"
  },
  "private": true
}

var con = document.getElementById("contract");
var conv = document.getElementById("contractvia");
var conc = document.getElementById("contractCourier");

//On checkbox return first select
con.addEventListener('click', myFunctionCons );


//if value of option is 3 show next select
conv.addEventListener('change', showSecondSelect );

function showSecondSelect() {
	//3 is the index of courier
	if (conv.selectedIndex == 3) {
		conc.style.display = "block";
	} else {
		conc.style.display = "none";
	}
}

function myFunctionCons() {
	if (con.checked == true) {
		conv.style.display = "block";
	} else {
		conv.style.display = "none";
	}
}

#contractvia,
#contractCourier {
	display: none;
}

在第一个下拉列表中选择的值等于'Courier'时显示第二个下拉列表

我的问题是如果我选择的第一个下拉值是Courier

1 个答案: