2

我正在研究一个根据选择下拉菜单生成的警报按钮。JavaScript 已经能够<select>完全按照我的意愿读取和发送下拉列表的值。但是，当涉及到显示触发警报消息的按钮时，这是我的问题。

问题

-- 我不太确定我是否真的正确删除了孩子（语法问题）

- 我似乎无法显示按钮。相反，它只执行它的onclick命令。

JAVASCRIPT

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

HTML

<div id="SoupBox">
    <select id="Soup" name="Soup" onchange="determineDisplay(this, 'contentView_Two');">
        <option>--Select--</option>
<?php foreach($soup_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="s_qty" type="text" placeholder="qty" size="1" maxlength="1" />
    <label id="contentView_Two"></label>

</div>

没有 PHP 的 HTML

<div id="SoupBox">
    <select id="Soup" name="Soup" onchange="determineDisplay(this, 'contentView_Two');">
        <option>--Select--</option>
        <option value="CN-CF">Healthy Choice Hearty Chicken ($1.31)</option>
        <option value="CN-CT">Pacific Foods Organic Creamy Tomato ($3.75)</option>
        <option value="CN-LT">Amy's Organic Lentil Vegetables ($2.62)</option>
        <option value="ND-BF">Ramen beef Noddles ($0.50)</option>
        <option value="ND-CF">Ramen Chicken Noddles ($0.50)</option>
        <option value="ND-LS">Ramen Lime Shrimp Noddles ($0.50)</option>
        <option value="ND-SF">Ramen Shrimp Noddles ($0.50)</option>
    </select>
    <input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" />
    <label id="contentView_Two"></label>

</div>
4

2 回答 2

1

这里有不同的问题：

  1. VB.setAttribute("display", "inline-block")：这是错误的，因为显示属性来自元素的样式，而不是元素本身。改为使用VB.style.display。

  2. VB.onClick = displayInfo(sv)：这是错误的，因为您在这里所做的是立即执行该功能。你可能是说VB.onclick = function() { displayInfo(sv); }

此外，您可以尝试添加以下样式属性：

VB.style.position = 'absolute';
VB.style.left = '5px';
VB.style.top = '5px';
VB.style.width = '50px';
VB.style.height = '20px';

否则我不确定 js 会如何渲染它。

于 2013-05-04T21:01:54.047 回答
0

修好了，谢谢大家的帮助。

JavaScript

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 = function() { displayInfo(sv);};

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

没有 PHP 的 HTML

<div id="SoupBox">
                <select id="Soup" name="Soup" onchange="determineDisplay(this, 'contentView_Two');">
                    <option>--Select--</option>
                                            <option value="CN-CF">Healthy Choice Hearty Chicken ($1.31)</option>
                                            <option value="CN-CT">Pacific Foods Organic Creamy Tomato ($3.75)</option>
                                            <option value="CN-LT">Amy's Organic Lentil Vegetables ($2.62)</option>
                                            <option value="ND-BF">Ramen beef Noddles ($0.50)</option>
                                            <option value="ND-CF">Ramen Chicken Noddles ($0.50)</option>
                                            <option value="ND-LS">Ramen Lime Shrimp Noddles ($0.50)</option>
                                            <option value="ND-SF">Ramen Shrimp Noddles ($0.50)</option>
                                        </select>
                <input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" />
                <label id="contentView_Two"></label>

                </div>
于 2013-05-04T21:44:55.497 回答