如何从选择选项下拉列表中获取值并在switch语句中使用该值

debugcn 发表于 Dev

Argo Lith

工作原理
当您输入“货币”值并单击“计算我的税费”按钮时，您将获得正确的值。

什么
不重要

您支付的总税金也基于您选择的关税类别。
1.默认情况下选择“电子”。计算税额
2时，将显示正确的值。当您尝试选择其他关税类别时，使用相同的“总计”，所显示的税额不会改变。
3.即使刷新并使用电子产品以外的其他选项，所有3个选项的应付金额仍相同（基于您输入的总金额）。

谢谢，谢谢您的帮助。
这是指向副本的链接：https : //repl.it/@argo92/CUSTOMS-CALCULATOR

//Percentages based on duties category
const TAX_ELECTRONICS = 0.31 //31%
const TAX_AUTOMOBILES = 0.33 //33%
const TAX_PERISHABLES = 0.12 //12%

// Exhibit 1: Get and store value from select option
var selObj = document.getElementById("dutiesCategory");
var selValue = selObj.options[selObj.selectedIndex].value;

// Check Option Value click handler
function getOption() {
    selectElement = document.querySelector('#dutiesCategory');
    output = selectElement.value;
    document.querySelector('.output').textContent = output;
}
var e = getOption();

// Exhibit 2: Test to see if we're still getting an option value
function tester() {
var f = $("#dutiesCategory").change(function() {
    var g = $(this).find("option:selected").val();
    console.log(g);
});
}
tester();

// Important: I need to find a way to get the values from the select input and merge them with the calculateTax function.
function calcDutiesCatTax(val) {
    if (selValue) {
        return TAX_ELECTRONICS;
    } else if (selValue) {
        return TAX_PERISHABLES;
    } else {
        return TAX_AUTOMOBILES;
    }
};

    // function calcDutiesCatTax(val) {
    // var result = "";
    // switch (selValue === val) {
    //  case 'Electronics':
    //      result = TAX_ELECTRONICS;
    //      break;
    //  case 'Automobile':
    //      result = TAX_AUTOMOBILES;
    //      break;
    //  case 'Food':
    //      result = TAX_PERISHABLES;
    //      break;
    // }
    // return result;
    // }

// Tax calculation function
function calculateTax() {
    //TEST Government Compound taxes base num = 350
    var x = document.getElementById("totalAmount").value;
    var ITEM_COST = parseInt(x);
    var TAX_10 = ITEM_COST * 0.10; // 35
    var TAX_5 = ITEM_COST * 0.05; // 17.5
    var TAX_2 = ITEM_COST * 0.02; // 7
    var TAX_8 = ITEM_COST * 0.08; // 28
    var totalCompoundTax = TAX_10 + TAX_5 + TAX_2 + TAX_8;

    // Calculate tax based on category
    var feesFromDutiesCat = calcDutiesCatTax(e) * ITEM_COST;
    console.log(feesFromDutiesCat);
    // Total amount to be paid (Inclusive of all taxes)
    var totalAmountToBePaidInEc = feesFromDutiesCat + totalCompoundTax * (2.68);
    var totalAmountToBePaidInUsd = feesFromDutiesCat + totalCompoundTax;

    document.getElementById("totaltaxesXCD").innerHTML = totalAmountToBePaidInEc.toFixed(2) + ' XCD';
    document.getElementById("totaltaxesUSD").innerHTML = '$' + totalAmountToBePaidInUsd.toFixed(2);
}

// console.log(selValue);
// var calcDutiesCat = function (value) {
//  var result = "";
//  switch (value) {
//      case 'electronics':
//          result = TAX_ELECTRONICS;
//          break;
//      case 'Automobile':
//          result = TAX_AUTOMOBILES;
//          break;
//      case 'Food':
//          result = TAX_PERISHABLES;
//          break;
//  }
//  return result;
// }

// function calcDutiesCatTax(val) {
//      if (val === selValue) {
//          return TAX_ELECTRONICS;
//      } else if (val === selValue) {
//          return TAX_PERISHABLES;
//      } else {
//          return TAX_AUTOMOBILES;
//      }
//  }

昌都科马蒂

calcDutiesCatTax（）仅替换此函数。我希望它对您有用。

//Percentages based on duties category
const TAX_ELECTRONICS = 0.31 //31%
const TAX_AUTOMOBILES = 0.33 //33%
const TAX_PERISHABLES = 0.12 //12%

// Exhibit 1: Get and store value from select option
var selObj = document.getElementById("dutiesCategory");
var selValue = selObj.options[selObj.selectedIndex].value;

// Check Option Value click handler
function getOption() {
	selectElement = document.querySelector('#dutiesCategory');
	output = selectElement.value;
	document.querySelector('.output').textContent = output;
}
var e = getOption();

// Exhibit 2: Test to see if we're still getting an option value
function tester() {
var f = $("#dutiesCategory").change(function() {
	var g = $(this).find("option:selected").val();
	//console.log(g);
});
}
tester();

// Important: I need to find a way to get the values from the select input and merge them with the calculateTax function.
function calcDutiesCatTax() {

if($("#dutiesCategory").val() == "electronics")
{
return TAX_ELECTRONICS;
}
else if($("#dutiesCategory").val() == "food")
{
return TAX_PERISHABLES;
}
else if($("#dutiesCategory").val() == "automobile")
{
return TAX_AUTOMOBILES;
}

};

	// function calcDutiesCatTax(val) {
	// var result = "";
	// switch (selValue === val) {
	// 	case 'Electronics':
	// 		result = TAX_ELECTRONICS;
	// 		break;
	// 	case 'Automobile':
	// 		result = TAX_AUTOMOBILES;
	// 		break;
	// 	case 'Food':
	// 		result = TAX_PERISHABLES;
	// 		break;
	// }
	// return result;
	// }

// Tax calculation function
function calculateTax() {
debugger
	//TEST Government Compound taxes base num = 350
	var x = document.getElementById("totalAmount").value;
	var ITEM_COST = parseInt(x);
	var TAX_10 = ITEM_COST * 0.10; // 35
	var TAX_5 = ITEM_COST * 0.05; // 17.5
	var TAX_2 = ITEM_COST * 0.02; // 7
	var TAX_8 = ITEM_COST * 0.08; // 28
	var totalCompoundTax = TAX_10 + TAX_5 + TAX_2 + TAX_8;

	// Calculate tax based on category
	var feesFromDutiesCat = calcDutiesCatTax() * ITEM_COST;
	console.log(feesFromDutiesCat);
	// Total amount to be paid (Inclusive of all taxes)
	var totalAmountToBePaidInEc = feesFromDutiesCat + totalCompoundTax * (2.68);
	var totalAmountToBePaidInUsd = feesFromDutiesCat + totalCompoundTax;

	document.getElementById("totaltaxesXCD").innerHTML = totalAmountToBePaidInEc.toFixed(2) + ' XCD';
	document.getElementById("totaltaxesUSD").innerHTML = '$' + totalAmountToBePaidInUsd.toFixed(2);
}

// console.log(selValue);
// var calcDutiesCat = function (value) {
// 	var result = "";
// 	switch (value) {
// 		case 'electronics':
// 			result = TAX_ELECTRONICS;
// 			break;
// 		case 'Automobile':
// 			result = TAX_AUTOMOBILES;
// 			break;
// 		case 'Food':
// 			result = TAX_PERISHABLES;
// 			break;
// 	}
// 	return result;
// }

// function calcDutiesCatTax(val) {
// 		if (val === selValue) {
// 			return TAX_ELECTRONICS;
// 		} else if (val === selValue) {
// 			return TAX_PERISHABLES;
// 		} else {
// 			return TAX_AUTOMOBILES;
// 		}
// 	}

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Anguilla Customs Duties Calculator</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	 crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.12/css/bootstrap-select.css" integrity="sha256-+oD8XVy0yTlpJi12d9AW34KibDEViR8XPho0d127HZA="
	 crossorigin="anonymous" />
	<link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
	<div class="container">
		<div class="section mt-5">
			<div class="row justify-content-start text-center">
				<div class="col">
					<small class="text-muted">A N G U I L L A</small>
					<h1>Duties Calculator</h1>
					<p class="lead">Enter details to begin</p>
					</div>
				</div>
				<!-- FORM -->
				<div class="row justify-content-start">
					<div class="col">
					<form name="dutiescalculator" id="dutiescalculator">
  <div class="form-group">
    <label for="nameOfPerson">Your name</label>
    <input type="text" class="form-control" id="nameOfPerson" aria-describedby="nameHelp">
    <small id="nameHelp" class="form-text text-muted">We'll need your name to create your receipt.</small>
  </div>

  <div class="form-group">
    <label for="dutiesCategory">Duties Category</label>
    <select id="dutiesCategory" class="form-control selectpicker"  aria-describedby="dutiesHelp">
      <option name="electro" value="electronics" selected="selected">Electronics</option>
			<option name="automobile" value="automobile" >Automobile</option>
      <option name="food" value="food">Food</option>
    </select>
		 <small id="dutiesHelp" class="form-text text-muted">This is used to calculate your total tax amount.</small>
		  <p class="mb-1 pb-1"> 
        The value of the option selected is:  
        <span class="output"></span> 
    </p> 
		 <button class="btn mt-4 btn-primary btn-sm" onclick="getOption(); return false;"> 
        Check option 
    </button> 
  </div>


<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="number" class="form-control" id="totalAmount" aria-label="taxHelp">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>
<small id="taxHelp" class="form-text text-muted">Enter the total amount of taxable items.</small>

  <button type="submit" value="click me" onclick="calculateTax(); return false;" class="btn mt-4 btn-primary">Calculate my taxes</button>
</form>
				</div>
			</div>
			<div class="row pt-3">
				<div class="col">
						<b>Amount to be paid</b>
						<p class="mb-0"><small><b>IN XCD:</b></small></p>
						<div class="lead" id="totaltaxesXCD"></div>
						<p class="mb-0"><small><b>IN USD:</b></small></p>
						<div class="lead pt-0 mt-0" id="totaltaxesUSD"></div>
				</div>
			</div>
		</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.12/js/bootstrap-select.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。