DEMO

Question

这是我的代码：

HTML

<select name="numbers" onchange="buttons(this)">
   <option value=""></option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>

<div id="add"><input type="submit" value="Add" name="add"></div>
<div id="editDelete"><input type="submit" value="Edit" name="edit">
<input type="submit" value="Delete" name="delete></div>

的JavaScript

function load() {
    document.getElementById("editDelete").innerHTML = ""; // I call this function with `<body onload="load()">`
}

function buttons(data) {
    if (data.value == "") {
        document.getElementById("editDelete").innerHTML = "";
        document.getElementById("add").innerHTML = '<input type="submit" value="Add" name="add">';
        return;
    }

    else {
        document.getElementById("editDelete").innerHTML = '<input type="submit" value="Edit" name="edit"><input type="submit" value="Delete" name="delete">';
        document.getElementById("add").innerHTML = "";
        return;
    } 
}

因此，当我加载页面时，只有一个按钮＆＃34;添加＆＃34;，当我选择任何选项＆＃34;添加＆＃34;消失了＆＃34;编辑＆＃34;和＆＃34;删除＆＃34;出现。但是当我选择<option value=""></option>选项时，＆＃34;添加＆＃34;犯规＆＃39;出现。我错过了什么或者我的代码错了吗？

Answer 1

试试这个：

DEMO

HTML：

1 2 3

<div id="add">
    <input type="submit" value="Add" name="add"></div>
<div id="editDelete">
    <input type="submit" value="Edit" name="edit">
    <input type="submit" value="Delete" name="delete" />
</div>

SCRIPT

 $(document).ready(function () {
            load();
        });

        load();

        function load() {
            document.getElementById("editDelete").innerHTML = ""; // I call this function with `<body onload="load()">`
        }

        $("#btn").change(function () {
            buttons(this);
        });

        function buttons(data) {
            if (data.value == "") {
                document.getElementById("editDelete").innerHTML = "";
                document.getElementById("add").innerHTML = '<input type="submit" value="Add" name="add">';
                return;
            }

            else {
                document.getElementById("editDelete").innerHTML = '<input type="submit" value="Edit" name="edit"><input type="submit" value="Delete" name="delete">';
                document.getElementById("add").innerHTML = "";
                return;
            }
        }

Answer 2

这是修改过的代码。您可以使用纯JavaScript实现相同的功能。

的 jsFiddle Demo

<html> <script> document.onreadystatechange = function () { document.getElementById('editDelete').innerHTML = ""; } function buttons(data) { if (data.value == "") { document.getElementById('editDelete').innerHTML = ""; document.getElementById('add').innerHTML = '<input type="submit" value="Add" name="add" />'; return; } else { document.getElementById("editDelete").innerHTML = '<input type="submit" value="Edit" name="edit" /><input type="submit" value="Delete" name="delete" />'; document.getElementById("add").innerHTML = ""; return; } } </script> <body> <select name="numbers" onchange="buttons(this)"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div id="add"><input type="submit" value="Add" name="add"></div> <div id="editDelete"><input type="submit" value="Edit" name="edit" /> <input type="submit" value="Delete" name="delete" /></div> </body> </html>

选择选项时的JavaScript显示按钮

2 个答案:

DEMO

的 jsFiddle Demo