Javascript 根据所选值显示输入按钮

我有一个从我的数据库填充的

下拉列表。为下拉列表生成项目列表时，显示每个项目更多信息的按钮也会生成。但是，我想隐藏每个按钮，除了与当前选择的下拉列表值对应的按钮

假设用户选择了下拉列表的第三个值。我将使用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>

--挑选--
我用生锈的JS找到了这个解决方案，我希望这个解决方案是不言自明的，我想说的是，它也很容易集成


首先是HTML标记。这是一个（或多个）选择和与分组相关的按钮（此处位于div中）：


你好
世界
你好
世界

如果仔细看，我已经在select元素中放置了一个data属性，该元素包含一个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'));

（功能（选择）{
var按钮=document.querySelectorAll（select.getAttribute（“数据按钮”）；
select.onchange=function（）{
对于（var i=0；i

这将使它全部生效，并注意在默认状态下隐藏按钮

请参见顶部图片中显示的正在运行的

一个更专业的变体是将按钮插入到标记中的选择列表中，并使用Javascript再次将其移出，同时保留先前在标记中定义的关系。可能使用。
要使解决方案接近您已经尝试过的解决方案，可以执行以下操作：

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

功能显示信息（按键）
{
警报（键）；
}
函数确定显示（项，项视图）{
var locateView=document.getElementsByClassName（itemView）；
var si=项。选择的索引；
var sv=项目。选项[si]。值；
var button=document.getElementById（“displayInfo（“+sv+”）；”）；
对于（变量i=0，max=locateView.length；i

这应该在不改变php的情况下完成。

但我也建议改变方法，使用jQuery创建按钮等

对上述变化的一些评论：


项i已经是DOM元素，因为您正在使用“this”调用determineDisplay
getElementsByClassName拼写错误
类名没有前导点。（这是css语法-由jQuery支持）
您的按钮id非常奇怪（
“displayInfo”（“+sv+”）

唯一的问题是，如果触发按钮，则显示警报。而不是不显示和警报。
好的，在了解了您的总体计划之后，您在编程时遇到的第一个问题是什么？我要补充一点，您可能会发现使用JS库（如jQuery）会更容易做到这一点。@halfer:现在，它就像天堂一样。您不需要jQuery，我只是用我生锈的JS技能尽了最大努力，如果你想看一看，下面是答案。@hakre哈哈，很抱歉，对于初学者来说，这个按钮根本没有出现。@halfer叫我old-fashion.Ah！这实际上是我代码中的一个o型。哈，谢谢你的帮助。我会尝试一下，按钮id为was假设是
“
。另外，我也会尝试一下jQuery按钮。我让它工作了！好吧，90%。我会发布我的新代码。（成功的10%是因为现在我必须显示按钮，而不是仅仅采取行动。）
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';
 }

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