Question

我有一个<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>

Answer 1

为了使解决方案接近您已经尝试过的解决方案，我们会这样做：

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';
 }

这应该没有chaning你的PHP 但我也建议改变方法，使用jQuery来创建按钮等。

对上述变化的一些评论：

项目我已经是一个DOM元素，因为你用“this”调用determineDisplay。
getElementsByClassName拼写错误。
没有类名的前导点。（这是css语法 - 由jQuery支持）
您的按钮ID非常奇怪（"displayInfo('" + sv + "')

Answer 2

随着我生锈的JS，我来到这个解决方案，这是非常不言自明的我希望，我会说也很容易整合。

Select Button Swap in Action

首先是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元素中放置一个数据属性，该元素包含一个CSS选择器，用于指示按钮的内容。

当然这不会自动运行。因此，以下javascript用于初始化显示/隐藏操作。如你所说，你希望这个参数化（对多个选择有意义），select元素作为参数传递：

(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'));

这会将所有内容付诸实践，并且还会隐藏处于默认状态的按钮。

请参阅顶部图片中显示的demonstration。

更专业的变体是将按钮插入标记中的选择列表，然后使用Javascript将它们再次移出，同时保留之前定义的关系标记。可能有XML-data-island。

Answer 3

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);
 }

唯一的问题是，如果触发按钮，则显示警报。而不是不显示和警告。

根据所选值显示输入按钮

3 个答案: