我偶然发现了一个问题，可以在您的帮助下找出一些逻辑来处理它。基本上，我有一个动态订单，根据用户选择的选项，在用户端使用javascript实时更新价格。问题是，有3个动态下拉列表可能并不全部存在，即有时会有下拉列表a-c，有时只有a，或者只有a和b，等等。我得到的错误是，任何未定义的选择的变量都是未定义的（显然）。我已经实现了一些js来处理这个问题，但没有成功。这是我正在使用的代码：
PHP:
$a_sql = ("SELECT * FROM prod_add WHERE pid = '$id' AND `group` = 'a'");
$a_query = mysqli_query($dbconx, $a_sql);
$a_Count = mysqli_num_rows($a_query);
if ($a_Count > 0) {
while($row = mysqli_fetch_array($a_query)) {
$a_option = $row["option"];
$a_value = $row["value"];
$a_results .= "<option value='$a_value'>$a_option</option>";
}
}
if($a_Count > 0) {
$a_opt = "<select class='opt_drop' id='optA' name='optA' onchange='getTotal()'>$a_results</select>";
} else {
$a_opt = "";
}
冲洗并重复b&c
HTML:
<h2 id="totalPrice">$<?php echo $base_cost ?></h2> <br />
<input type="hidden" name="base_cost" id="base_cost" value="<?php echo $base_cost ?>" />
<?php echo $a_opt; ?><br />
<?php echo $b_opt; ?><br />
<?php echo $c_opt; ?>
Quantity:
<select name="quantity" id="quantity" onchange="getTotal()">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>
<option value="4"> 4</option>
<option value="5"> 5 </option>
<option value="6"> 6 </option>
<option value="7"> 7 </option>
<option value="8"> 8 </option>
<option value="9"> 9 </option>
<option value="10"> 10 </option>
</select>
Javascript：
<script type="text/javascript">
function getDDValue(elementID){
var value = 0;
var element = document.getElementById(elementID);
value = element.options[element.selectedIndex].value;
console.log(value);
return parseFloat(value);
}
function getBase (elementID) {
var value = 0;
var element = document.getElementById(elementID);
value = element.value;
return parseFloat(value);
}
function getTotal(){
if (typeof optA != "undefined") {
var optA = getDDValue("optA");
} else {
var optA = "0";
}
if (typeof optB != "undefined") {
var optB = getDDValue("optB");
} else {
var optB = "0";
}
if (typeof optC != "undefined") {
var optC = getDDValue("optC");
} else {
var optC = "0";
}
var quantity = getDDValue("quantity");
var base_cost = getBase ("base_cost")
var totalPrice = '0';
totalPrice = parseFloat((+base_cost + +optA + +optB + +optC) * +quantity);
console.log(totalPrice);
document.getElementById('totalPrice').innerHTML = "$" + totalPrice;
}
getTotal();
</script>
正如您在上面看到的，我尝试确定该值是否未定义，以及是否只给它一个值0。虽然我不知道为什么，但那没用。
在javascript中使用typeof时，通常最好将结果与三等比较器进行比较。因此，不要使用!=，而是使用!==
同样在javascript中，如果将值为undefined的对象传递到条件语句中，则其计算结果将为false。如果值被省略或为0、-0、null、false、NaN、undefined或空字符串（"），则对象的初始值为false。这意味着您可以按如下方式重写上面的内容，除非您特别希望值恰好为undefined:
function getTotal(){
// If optA does not exist, create the variable and assign it
if (!optA) {
var optA = getDDValue("optA");
// Otherwise it exists, now set it to "0" pleaseandthankyou :)
} else {
optA = "0";
}
...
}
编辑：根据您对上述答案的回复，我认为这可能会有所帮助：变量element为null。这意味着找不到id为elementID的元素，因此将其设置为null。因为它为null，所以它没有属性options。检查以确保确实有一个DOM元素，其id属性等于您作为elementID传入的内容。
function getDDValue(elementID){
var element = document.getElementById(elementID);
var value;
// if the element exists
if(element){
value = element.options[element.selectedIndex].value;
}else{
value = 0;
}
console.log(value);
return parseFloat(value);
}
getTotal的if条件中的optA（以及其他）将始终为undefined。Js只知道函数级作用域，使用var在函数的何处定义它们并不重要（您也可以在函数体的末尾定义它们）。
因此，CCD_ 15的所有出现都与函数的作用域有关。这就是为什么它总是undefined。