2

我有一个<select>从我的数据库中填充的下拉列表。当为下拉列表生成项目列表时，显示每个项目的更多信息的按钮也会生成。但是，我想隐藏每个按钮，除了与当前选择的下拉列表值对应的按钮。

因此，假设用户选择下拉列表的第三个值。我会使用 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.ini 文件。
但我也建议更改使用 jQuery 创建按钮等的方法。

对上述变化的一些评论：

  • 项目我已经是一个 DOM 元素，因为您正在使用“this”调用确定显示。
  • getElementsByClassName 拼写错误。
  • 类名没有前导点。（这是 css 语法 - 由 jQuery 支持）
  • 你的按钮 id 真的很奇怪（"displayInfo('" + sv + "')
于 2013-05-04T12:44:16.137 回答
2

使用我生锈的 JS，我来到了这个解决方案，我希望它非常不言自明，而且我想说也很容易集成。

选择按钮交换在行动

首先是 HTML 标记。那是一个（或多个）选择并且与分组相关的按钮（这里在 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>

如果您仔细观察，我在 select 元素中放置了一个 data 属性，其中包含一个 CSS 选择器，它告诉您按钮是什么。

当然这不会自动运行。因此，以下 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 回答
0 
function displayInfo(key) {
    alert(key);
}

function determineDisplay(Item, ButtonLocation) {
    // Get selected value from drop down
    var si = Item.selectedIndex;
    var sv = Item.options[si].value;

    // Create View Button to display info
    var VB = document.createElement("input");

    // Assign attributes to button
    VB.setAttribute("type", "button");
    VB.setAttribute("value", "view");
    VB.setAttribute("display", "inline-block");
    VB.onClick = displayInfo(sv);

    // Insert button
    var insertHere = document.getElementsById(ButtonLocation);
    var CheckChild = insertHere.lastChild;
    if(lastChild) {
        insertHere.removeChild(CheckChild);
        insertHere.appendChild(VB);
    }
    else
        insertHere.appendChild(VB);
 }

唯一的问题是，让按钮显示，然后在触发时发出警报。而不是不显示和提醒。

于 2013-05-04T20:25:10.067 回答