2

データベースから入力される<select>ドロップダウンがあります。ドロップダウン用にアイテムのリストが生成されると、各アイテムの詳細情報を表示するボタンも生成されます。しかし、ドロップダウンで現在選択されている値に対応するボタンを除いて、すべてのボタンを非表示にしたいと思います。

ユーザーがドロップダウンの 3 番目の値を選択したとします。その変化を監視する JavaScript があり、その値に基づいて対応するボタンが表示されます。ユーザーがボタンをクリックすると、選択したオプションのすべての情報が警告ウィンドウに表示されます。ここで、ユーザーはその値を他のオプションに再度変更します。値が一致しないため、前のボタンは非表示になり、一致するボタンが表示されます。

すべての JavaScript は外部ファイルで使用されることに注意してください。このフォームには複数のドロップダウンがあるため、パラメーターを取り込む必要があります。

JavaScript

function determineDisplay(Item, itemView) {
    var locateItem = document.getElementById(Item);
    var locateView = document.getElementByClassName('.' + itemView);

    locateItem.change(function() {
        if(locateItem.value == locateView.id) {
            locateView.style = "block";
            locateView.show();
        }
        else
            locateView.hide();
    }
}

HTML

<div id="SnackBox" style="display: none">
    <select id="dfood" name="dfood" 
        onchange="determineDisplay(this, 'content_one');">
        <option>--Select--</option>
        <?php foreach($dfood_products as $key => $product) : 
            $name = $product['name'];        
            $cost = number_format($product['cost'], 2);
            $item = $name . ' ($' . $cost . ')';?>
            <option value="<?php echo $key; ?>"><?php echo $item; ?></option>
        <?php endforeach; ?>
    </select>

    <input name="df_qty" type="text" placeholder="qty" size="1" maxlength="1"/>

    <?php foreach($dfood_products as $key => $product) : ?>
        <input type="button" value="view" id="displayInfo('<?php echo $key; ?>');" 
        class="content_one" style="display:none" 
        onclick="displayInfo('<?php echo $key; ?>');"/>
    <?php endforeach; ?>
    </div>
    <span id="SnackPlate"></span>
4

3 に答える 3

3

ソリューションをすでに試したものに近づけるために、次のようにします。

function displayInfo(key)
{
    alert(key);
}

function determineDisplay(Item, itemView) {

    var locateView = document.getElementsByClassName(itemView);
    var si = Item.selectedIndex;
    var sv = Item.options[si].value;
    var button = document.getElementById( "displayInfo('" + sv + "');");
    for (var i=0, max=locateView.length; i < max; i++) {
           locateView[i].style.display = 'none';
     }
     button.style.display = 'inline-block';
 }

これは、php を変更せずに行う必要があります。
ただし、アプローチを変更してjQueryを使用してボタンなどを作成することもお勧めします.

上記の変更に対するいくつかのコメント:

  • 「this」でdetermineDisplayを呼び出しているため、アイテムはすでにDOM要素です。
  • getElementsByClassName のスペルが間違っていました。
  • クラス名の先頭にドットはありません。(これは css 構文です - jQuery でサポートされています)
  • あなたのボタンIDは本当に奇妙です（"displayInfo('" + sv + "')
于 2013-05-04T12:44:16.137 に答える
2

私のさびたJSで、私はこのソリューションにたどり着きました。これはかなり自明であり、統合も非常に簡単だと思います。

選択ボタン スワップの動作

まず、HTML マークアップがあります。これは、1 つ (または複数) の選択と、関連するボタンがグループ化されたものです (ここでは div 内):

<select id="select" data-buttons="#button button">
    <option>Hello</option>    
    <option>World</option>    
</select>

<div id="button">
    <button>Hello</button>
    <button>World</button>
</div>

よく見ると、ボタンが何であるかを示す CSS セレクターを含む select 要素に data 属性を配置しています。

確かに、これは自動的に実行されません。したがって、次の JavaScript を使用して表示/非表示アクションを初期化します。これをパラメトリックにしたいと言ったように（複数の選択に意味があります）、選択要素はパラメーターとして渡されます：

(function(select) {    
    var buttons = document.querySelectorAll(select.getAttribute("data-buttons"));
    select.onchange = function() {
        for (var i = 0; i < buttons.length; i++) {            
            buttons[i].style.display = (this.selectedIndex == i) 
                                       ? 'inline-block' 
                                       : 'none';
        }        
    }
    select.onchange();
})(document.getElementById('select'));

これにより、すべてが実行され、デフォルトの状態でボタンが非表示になるように注意が払われます。

上の写真に示されている動作中のデモンストレーションをご覧ください。

より専門的な方法は、マークアップの選択リストにボタンを挿入し、 Javascript を使用して、マークアップで以前に定義された関係を保持しながらボタンを再び移動することです。おそらくXML-data-island を使用します。

于 2013-05-04T11:30:45.943 に答える