2017-02-17 257 views
0

我有一個可供我的產品配置器下拉菜單的選擇產品的地方。所選產品具有附加信息(是或否),在選擇適當的產品時顯示。產品配置器有幾種可供選擇的產品。更新下拉菜單後更改值

如果其中一個產品具有附加信息「否」,則最終消息爲「否」。

如果我現在選擇信息從No更改爲Yes的產品,那麼在沒有頁面刷新的情況下,最終消息也應更改爲「Yes」。

的選擇框代碼如下:

 <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 } ?> 

這對初始選擇的產品能正常工作,但當然沒有按」當我在下拉菜單中更改數值時不會改變。我需要添加什麼才能使其工作?

附加信息 - 如果我選擇在選擇框不同的值,那麼同樣在下面的字段中的值被更新:

 <?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 } ?> 

此字段$孩子[「信息」] [$ FIELD_NAME]含有是/否應該觸發最終消息的值。

有多達5行用於選擇產品的下拉菜單,並且它們中的每個在字段$ child ['info'] [$ field_name]中都有Yes/No值。因此,只要其中一行的值爲「否」,最後的消息也是「否」。

print_r($ ot ['gp_child']);數組([53] => Array([child_id] => 53 [info] =>數組([product_id] => 53 [gp_parent_id] => 0 [name] => abart [description] => [數組] meta_title] => test [meta_description] => [meta_keyword] => [tag] => 1234ZV [model] => test [sku] =>是 [upc] => [ean] => [jan] => [isbn] => [mpn] => [location] => [quantity] => -1 [delivery_days] => 14 [stock_status] => Nicht an Lager [image] => catalog/car-logo/abarth.png [manufacturer_id] => [manufacturer] => [price] => 100.0000 [special] => [reward] => [points] => 0 [tax_class_id] => 0 [date_available] => 2017-02-10 [weight ] => 0.00kg [weight_class_id] => 1 [length] => 0.00cm [width] => 0.00cm [height] => 0.00cm [length_class_id] => 1 [minus] => 1 [rating] => 0 [reviews] => 0 [minimum] => 1 [sort_order] => 1 [status] => 1 [date_added] => 2017-02-15 14:30:33 [date_modifi編輯] => 2017-02-17 17:17:22 [已觀看] => 42 [股票] => Nicht an Lager)[image] =>陣列([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] =>))

在其觸發是結束時的值/無消息是[SKU]

+0

你嘗試過這方面的任何JavaScript或jQuery的? – Aarrbee

回答

0

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>

+0

我試過了你的建議,但這還沒有起作用。我已經添加了一些額外的信息在我最初的帖子....謝謝 – Chris

+0

你有沒有在你的文件中添加像http://code.jquery.com/jquery-latest.js這樣的jquery文件? –

+0

是的...... jquery在那裏 – Chris