确定是否使用javascript定义动态选择
Determine if dynamic selects are defined with javascript
我偶然发现了一个问题,可以在您的帮助下找出一些逻辑来处理它。基本上,我有一个动态订单,根据用户选择的选项,在用户端使用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
。
- d3.hexbin插件-动态定义颜色域以适应数据
- 传递给 PHP 表单时 JavaScript 动态变量上的未定义索引
- 如何在angular.js中动态应用自定义过滤器
- 向动态生成的DOM添加Angular自定义指令
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- 尝试使用Node.js动态路由从IMDB中抓取电影内容.但是在我的output.json文件中没有定义
- 如何设置'targets'在列中动态定义数据表
- 在angular.js中定义动态URL的重定向
- 确定是否使用javascript定义动态选择
- sails.js:枚举的模型定义 - 动态值列表
- 使用 prototype.slice.call 定义动态二维数组
- 未定义动态 li 标签内按钮的 onclick 事件
- 允许在标记自定义动态图章后编辑表单字段
- 如何向副标题插入自定义动态值
- 如何在typescript中定义动态属性
- 引导选择自定义动态选项
- 带有自定义动态日期范围的jQuery UI日期picker
- 如何在css(或html)中定义动态高度
- Datatable插件无法自定义动态加载的表
- 是否可以在JavaScript中使用对象字面值定义动态命名的属性?