2017-02-17 24 views
0

製品を選択できる製品コンフィグレータのドロップダウンがあります。選択した製品には、適切な製品を選択するときに表示される追加情報(「はい」または「いいえ」)があります。製品コンフィギュレータには、選択可能ないくつかの製品があります。ドロップダウンの更新後の値を変更

いずれかの製品に追加情報「いいえ」がある場合、最後のメッセージは「いいえ」です。

ここで情報を「いいえ」から「はい」に変更した製品を選択した場合、最後のメッセージもページを更新せずに「はい」に変更する必要があります。次のように

選択ボックスのコードは次のとおりです。

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

これは「最初の選択した製品のため正常に動作しますが、もちろんdoesnのドロップダウンで値を変更すると変更されません。これを機能させるために何を追加する必要がありますか?

追加情報 - 私は、選択ボックスに別の値を選択した場合は、その後も、次のフィールドの値が更新されます。

 <?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]が含まれていますYes/No最終メッセージをトリガーする値。

プロダクトを選択するためのプルダウン付き行が最大5行あり、それぞれ$ child ['info'] [$ field_name]フィールドに値Yes/Noがあります。したがって、行のいずれかが値「いいえ」を持つとすぐに、最終メッセージも「いいえ」になります。

print_rからの結果($ ot ['gp_child']); ([製品ID] => 53 [gp_parent_id] => 0 [name] => abart [description] => [[]] => 53) [sku] =>はい [upc] => [ean] => [jan] =>テストは[meta_description] => [meta_keyword] => [tag] => 1234ZV [model] [在庫] => [場所] => [数量] => -1 [配達日] => 14 [在庫状況] =>ラッカーの画像[カタログ]/car-logo/abarth.png [ポイント] => 0 [tax_class_id] => 0 [date_available] => 2017-02-10 [重量] => [メーカー] => [価格] => 100.0000 [特別] => [報酬] => [ポイント] ] => 0.00kg [weight_class_id] => 1 [length] => 0.00cm [width] => 0.00cm [height] => 0.00cm [length_class_id] => 1 [減算] => 1 [評価] => 0 [レビュー] => 0 [最小] => 1 [sort_order] => 1 [ステータス] => 1 [date_added] => 2017-02-15 14:30:33 [date_modifi [画像] =>配列([ポップアップ] =>http://2302.speedone.ch/image/cache/catalog/car-logo/abarth-600x400.png [親指] =>http://2302.speedone.ch/image/cache/catalog/car-logo/abarth-50x50.png [スワップ]> [2017-02-17 17:17:22] ] =>http://2302.speedone.ch/image/cache/catalog/car-logo/abarth-50x50.png)[name] => abart [属性] => Array()[price] => CHF 100.00 [特別] => [税] => CHF 100.00 [nocart] => [child_to_hide] =>))

はいを​​トリガ端における値/いいえメッセージは[SKU]

+0

あなたは、このための任意のjavascriptやjqueryのを試してみましたか? – Aarrbee

答えて

0

PHPはサーバサイドのスクリプト言語ではないし、それは、単にこれを行うことはできません。必要なのはクライアントサイトのプログラミングです。

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> 

の作業のコードスニペットここ:

それらの

一つは、より便利になりますjqueryのです

$(".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

関連する問題