Question

我正在处理根据选择下拉列表生成的警报按钮。 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>

Answer 1

这里有不同的问题：

VB.setAttribute("display", "inline-block")：这是错误的，因为display属性来自元素的样式，而不是元素本身的样式。请改用VB.style.display。
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会如何呈现它。

Answer 2

修复它，谢谢大家的帮助。

<强>的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>

使用javascript添加/删除输入字段

2 个答案: