Question

我试图向用户显示下拉菜单，但只有当用户点击按钮时，我尝试了几种方式但没有运气，我已将两个按钮和选择框现在放在同一个div中但它仍然没有工作。当用户点击＆＃34;添加股票＆＃34;按钮它应该打开下拉。

<head><h1>CRS</h1></head>
<button id = 'newEntry' onclick="newBill()">Create New Bill</button>
<button id= 'clearEntry'> Reset </button>
<button id= 'dailyReport' > Report </button>
<div>
    <button id= 'AdditemToStock'  onclick="askCategory()">Add Stock</button>
    <select style="visibility:hidden;" id="showInDropDown">
        <option disabled="disabled" selected="selected">Choose Category</option>
    </select>
</div>
<div id="NewBillMsg"> </div>
<div id="addToCartMsg"> </div>

<div id="itemList" style="display:none">

    <h3>Select items</h3>
    <select name="items" id="itemIndex" onclick="selectedItem()">
        <option selected="selected">Select Items</option>
        <option value="chocolate">chocolate</option>
        <option value="Eggs">Eggs</option>
        <option value="Bread">Bread</option>
        <option value="Milk">Milk</option>
    </select> 
</div>

<script>            
    function cashRegister() {
        total= 0;
        addBill:function () {
            this.total+=itemCost;
            document.getElementById('NewBillMsg').innerHTML = "New";
            document.getElementById('itemList').style.display="block";      
        },

        scan: function(item,quantity) {
            switch (item) {
                case "Eggs": this.add(0.98 * quantity); break;
                case "Milk": this.add(1.23 * quantity); break;
                case "Bread": this.add(4.99 * quantity); break;
                case "chocolate": this.add(0.45 * quantity); break;
            }
            return true;
        //addToCart: function () {
            //document.getElementById('addToCartMsg').innerHTML = "Enter Quantity ";
        //},
        askCategory: function () {
            button.onclick = function() {
            document.getElementById('showInDropDown').style.display="block";                
            },
        };
</script>

Answer 1

document.getElementById（＆＃34; showInDropDown＆＃34;）。style.visibility =＆＃34; visible＆＃34;;

Answer 2

这里有很多语法错误。修复了大部分问题。以下代码应该有效：

<button id='newEntry' onclick="newBill()">
Create New Bill</button>
<button id='clearEntry'> Reset </button>
<button id='dailyReport'> Report </button>
<div>
    <button id='AdditemToStock' onclick="askCategory()">Add Stock</button>
    <select style='display:none;' id="showInDropDown">
        <option disabled="disabled" selected="selected">Choose Category</option>
    </select>
</div>
<div id="NewBillMsg"> </div>
<div id="addToCartMsg"> </div>
<div id="itemList" style="display:none">
    <h3>Select items</h3>
    <select name="items" id="itemIndex" onclick="selectedItem()">
        <option selected="selected">Select Items</option>
        <option value="chocolate">chocolate</option>
        <option value="Eggs">Eggs</option>
        <option value="Bread">Bread</option>
        <option value="Milk">Milk</option>
    </select>
</div>
<script>
function cashRegister() {
    var total = 0,
        addBill = function() {
            this.total += itemCost;
            document.getElementById('NewBillMsg').innerHTML = "New";
            document.getElementById('itemList').style.display = "block";
        },

        scan = function(item, quantity) {
            switch (item) {
                case "Eggs":
                    this.add(0.98 * quantity);
                    break;
                case "Milk":
                    this.add(1.23 * quantity);
                    break;
                case "Bread":
                    this.add(4.99 * quantity);
                    break;
                case "chocolate":
                    this.add(0.45 * quantity);
                    break;
            }
        };
}

var askCategory = function() {
    document.getElementById('showInDropDown').style.display = "block";
};
</script>

Answer 3

在同一功能中隐藏和显示需要检查它是可见还是隐藏。

function askCategory() {
    document.getElementById('itemList').style.display="block";
}

Answer 4

你应该将你的选择下拉隐藏代码替换为它，它肯定会有效，

<select style="display:none" id="showInDropDown">

然后您可以使用现有代码，如代码段

中所示

＆＃13;

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Learn It HTML Template</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body>
<head><h1>CRS</h1></head>
<button id = 'newEntry' onclick="newBill()">Create New Bill</button>
<button id= 'clearEntry'> Reset </button>
<button id= 'dailyReport' > Report </button>
<div>
    <button id= 'AdditemToStock'  onclick="askCategory()">Add Stock</button>
    <select style="display:none" id="showInDropDown">
        <option disabled="disabled" selected="selected">Choose Category</option>
    </select>
</div>
<div id="NewBillMsg"> </div>
<div id="addToCartMsg"> </div>

<div id="itemList" style="display:none">

    <h3>Select items</h3>
    <select name="items" id="itemIndex" onclick="selectedItem()">
        <option selected="selected">Select Items</option>
        <option value="chocolate">chocolate</option>
        <option value="Eggs">Eggs</option>
        <option value="Bread">Bread</option>
        <option value="Milk">Milk</option>
    </select> 
</div>

<script>            
    function askCategory() {
            document.getElementById('showInDropDown').style.display="block";                
        };
</script>
</body>
</html>

＆＃13;

如何在点击按钮的javascript中隐藏/显示下拉菜单

4 个答案: