更新下拉列表后更改值
Change value after update of dropdown
我有一个产品配置器下拉菜单,我可以在其中 select 一个产品。 selected 产品具有附加信息(是或否),当 selecting 相应产品时会显示这些信息。产品配置器有多种产品可供选择。
如果其中一个产品有附加信息"No",那么最后的消息是"No"。
如果我现在选择一个信息从否变为是的产品,那么最终消息也应该变为 "Yes" 而无需刷新页面。
select盒子代码如下:
<select name="<?php echo $ot['option_type']; ?>">
<?php foreach ($ot['gp_child'] as $key => $child) { $child_id = $child['child_id']; ?>
<option value="<?php echo $child_id; ?>" id="<?php echo $ot['option_type'] . '-' . $child_id; ?>" data-hide="<?php echo $child['child_to_hide']; ?>"><?php echo $child['name']; ?></option>
<?php } ?>
</select>
我要显示的最终消息是:
<?php if ($child['info'][$field_name] == 'No') { ?>
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="red">No</span></h5>
<?php } else { ?>
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="green">Yes</span></h5>
<?php } ?>
这对于最初的 selected 产品来说效果很好,但当我更改下拉列表中的值时当然不会改变。我需要添加什么才能使其正常工作?
附加信息 - 如果我在 select 框中选择不同的值,则以下字段中的值也会更新:
<?php foreach ($gp_child_info as $field_name => $field_text) if($child['info'][$field_name]) { ?>
<div><?php echo $field_text; ?>: <?php echo $child['info'][$field_name]; ?></div>
<?php } ?>
此字段 $child['info'][$field_name] 包含应触发最终消息的是/否值。
最多有 5 行带有用于选择产品的下拉菜单,每行在 $child['info'][$field_name] 字段中的值为 Yes/No。因此,一旦其中一行的值为 "No",最终消息也是 "No".
结果来自 print_r($ot['gp_child']);
数组 ( [53] => 数组 ( [child_id] => 53 [信息] => 数组 ( [product_id] => 53 [gp_parent_id] => 0 [name] => abart [description] => [meta_title] => test [meta_description] => [meta_keyword] => [tag] => 1234ZV [model] = > 测试 [sku] => 是 [upc] => [ean] => [jan] => [isbn] => [mpn] => [位置] => [数量] => -1 [delivery_days] => 14 [stock_status] => Nicht an Lager [图片] => catalog/car-logo/abarth.png [manufacturer_id] => [制造商] => [价格] => 100.0000 [特价] => [奖励] => [积分] => 0 [tax_class_id] => 0 [date_available] => 2017-02-10 [重量] => 0.00kg [weight_class_id] => 1 [长度] => 0.00cm [宽度] => 0.00cm [高度] => 0.00cm [length_class_id] => 1 [减去] => 1 [评分] => 0 [评论] => 0 [最低] => 1 [sort_order] => 1 [状态] => 1 [date_added] => 2017-02- 15 14:30:33 [date_modified] => 2017-02-17 17:17:22 [查看] => 42 [stock] => Nicht an Lager ) [image] => Array ( [popup] => http://2302.speedone.ch/image/cache/catalog/car-logo/abarth-600x400.png [thumb] => http://2302.speedone.ch/image/cache/catalog/car-logo/abarth-50x50.png [swap] => http://2302.speedone.ch/image/cache/catalog/car-logo/abarth-50x50.png ) [name] => abart [attributes] => Array ( ) [price] => CHF 100.00 [special] => [tax] => CHF 100.00 [nocart] => [child_to_hide] => ) )
触发Yes/No消息的末尾的值是[SKU]
Php 是服务器端脚本语言,根本无法做到这一点。你需要的是客户端编程。
其中一个是 jquery,它会更方便:
HTML:
<select class="select-name" name="<?php echo $ot['option_type']; ?>">
<?php foreach ($ot['gp_child'] as $key => $child) { $child_id = $child['child_id']; ?>
<option data-sku="<?php echo $child['info']['sku']; ?>" value="<?php echo $child_id; ?>" id="<?php echo $ot['option_type'] . '-' . $child_id; ?>" data-hide="<?php echo $child['child_to_hide']; ?>"><?php echo $child['name']; ?></option>
<?php } ?>
</select>
<div class="message">
<?php if ($child['info'][$field_name] == 'No') { ?>
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="red">No</span></h5>
<?php } else { ?>
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="green">Yes</span></h5>
<?php } ?>
</div>
JQUERY:
<script>
$(".select-name").on("change",function(){
var length = $(".select-name option:selected[data-sku=No]").length;
if(length > 0) { // at least one is no
$(".message").html("<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class='red'>No</span></h5>");
} else {
$(".message").html("<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class='green'>Yes</span></h5>");
}
});
</script>
这里的工作代码片段:
$(".select-name").on("change",function(){
var value = $(this).find("option:selected").text();
if(value == "No") {
$(".message").html("<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class='red'>No</span></h5>");
} else {
$(".message").html("<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class='green'>Yes</span></h5>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-name" name="">
<option selected>No</option>
<option>Yes</option>
</select>
<div class="message">
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="red">No</span></h5>
</div>
我有一个产品配置器下拉菜单,我可以在其中 select 一个产品。 selected 产品具有附加信息(是或否),当 selecting 相应产品时会显示这些信息。产品配置器有多种产品可供选择。
如果其中一个产品有附加信息"No",那么最后的消息是"No"。
如果我现在选择一个信息从否变为是的产品,那么最终消息也应该变为 "Yes" 而无需刷新页面。
select盒子代码如下:
<select name="<?php echo $ot['option_type']; ?>">
<?php foreach ($ot['gp_child'] as $key => $child) { $child_id = $child['child_id']; ?>
<option value="<?php echo $child_id; ?>" id="<?php echo $ot['option_type'] . '-' . $child_id; ?>" data-hide="<?php echo $child['child_to_hide']; ?>"><?php echo $child['name']; ?></option>
<?php } ?>
</select>
我要显示的最终消息是:
<?php if ($child['info'][$field_name] == 'No') { ?>
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="red">No</span></h5>
<?php } else { ?>
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="green">Yes</span></h5>
<?php } ?>
这对于最初的 selected 产品来说效果很好,但当我更改下拉列表中的值时当然不会改变。我需要添加什么才能使其正常工作?
附加信息 - 如果我在 select 框中选择不同的值,则以下字段中的值也会更新:
<?php foreach ($gp_child_info as $field_name => $field_text) if($child['info'][$field_name]) { ?>
<div><?php echo $field_text; ?>: <?php echo $child['info'][$field_name]; ?></div>
<?php } ?>
此字段 $child['info'][$field_name] 包含应触发最终消息的是/否值。
最多有 5 行带有用于选择产品的下拉菜单,每行在 $child['info'][$field_name] 字段中的值为 Yes/No。因此,一旦其中一行的值为 "No",最终消息也是 "No".
结果来自 print_r($ot['gp_child']);
数组 ( [53] => 数组 ( [child_id] => 53 [信息] => 数组 ( [product_id] => 53 [gp_parent_id] => 0 [name] => abart [description] => [meta_title] => test [meta_description] => [meta_keyword] => [tag] => 1234ZV [model] = > 测试 [sku] => 是 [upc] => [ean] => [jan] => [isbn] => [mpn] => [位置] => [数量] => -1 [delivery_days] => 14 [stock_status] => Nicht an Lager [图片] => catalog/car-logo/abarth.png [manufacturer_id] => [制造商] => [价格] => 100.0000 [特价] => [奖励] => [积分] => 0 [tax_class_id] => 0 [date_available] => 2017-02-10 [重量] => 0.00kg [weight_class_id] => 1 [长度] => 0.00cm [宽度] => 0.00cm [高度] => 0.00cm [length_class_id] => 1 [减去] => 1 [评分] => 0 [评论] => 0 [最低] => 1 [sort_order] => 1 [状态] => 1 [date_added] => 2017-02- 15 14:30:33 [date_modified] => 2017-02-17 17:17:22 [查看] => 42 [stock] => Nicht an Lager ) [image] => Array ( [popup] => http://2302.speedone.ch/image/cache/catalog/car-logo/abarth-600x400.png [thumb] => http://2302.speedone.ch/image/cache/catalog/car-logo/abarth-50x50.png [swap] => http://2302.speedone.ch/image/cache/catalog/car-logo/abarth-50x50.png ) [name] => abart [attributes] => Array ( ) [price] => CHF 100.00 [special] => [tax] => CHF 100.00 [nocart] => [child_to_hide] => ) )
触发Yes/No消息的末尾的值是[SKU]
Php 是服务器端脚本语言,根本无法做到这一点。你需要的是客户端编程。
其中一个是 jquery,它会更方便:
HTML:
<select class="select-name" name="<?php echo $ot['option_type']; ?>">
<?php foreach ($ot['gp_child'] as $key => $child) { $child_id = $child['child_id']; ?>
<option data-sku="<?php echo $child['info']['sku']; ?>" value="<?php echo $child_id; ?>" id="<?php echo $ot['option_type'] . '-' . $child_id; ?>" data-hide="<?php echo $child['child_to_hide']; ?>"><?php echo $child['name']; ?></option>
<?php } ?>
</select>
<div class="message">
<?php if ($child['info'][$field_name] == 'No') { ?>
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="red">No</span></h5>
<?php } else { ?>
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="green">Yes</span></h5>
<?php } ?>
</div>
JQUERY:
<script>
$(".select-name").on("change",function(){
var length = $(".select-name option:selected[data-sku=No]").length;
if(length > 0) { // at least one is no
$(".message").html("<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class='red'>No</span></h5>");
} else {
$(".message").html("<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class='green'>Yes</span></h5>");
}
});
</script>
这里的工作代码片段:
$(".select-name").on("change",function(){
var value = $(this).find("option:selected").text();
if(value == "No") {
$(".message").html("<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class='red'>No</span></h5>");
} else {
$(".message").html("<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class='green'>Yes</span></h5>");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-name" name="">
<option selected>No</option>
<option>Yes</option>
</select>
<div class="message">
<h5>Diese Produktekonfiguration ist für den CH-Strassenverkehr Zugelassen: <span class="red">No</span></h5>
</div>