用javascript创建一个选项菜单

Create an option menu in javascript

本文关键字：一个 选项 菜单 javascript 创建      更新时间：2023-09-26

我正在用HTML和javascript制作一个Soduko游戏。我想让用户选择号码（0-9），而不是输入它们。

以下是一个输入（单元格0:0）的示例：

<td><input id="c00" type="text" size="1" onclick="validate()"/></td>

我希望javascript代码在单击该单元格时显示0-9选项。

我的想法是。

if oncliked()
then display menu
document.getElementById("c00").value = selected value.

您应该为您的点击事件使用类而不是id，例如：

<td><input class="number-select" type="text" id="c00" size="1"/></td>

然后您可以在jQuery:中绑定到所有这些

$("input.number-select").click(function(){
    $("#tile-chooser").show();    
    ...
}

在这个回调中，您可以使用

$(this).val()

获取或设置textbox的值。

同样在click上，您应该显示您的数字选择器。您可以通过创建一个具有data-input-id属性的div来实现这一点，您将在其中存储要填充的文本框的id。

然后在这个div中，您可以创建10个带有数字的divs和类似digit-tile的特殊类，并将回调附加到它们：

$("div.digit-tile").click(function() {
    var inputId = $(this).parent().data("input-id");
    $("#" + inputId).val($(this).data("value"));
    $(this).parent().hide();
}

你的瓷砖可以看起来像这个

<div id="tile-chooser" style="display:none">
    <div class="digit-tile" data-value="1">1</div>
    ...
</div>

添加一些CSS使其看起来不错，它应该可以工作。

您需要添加的最后一件事是用tile定位div，这样它就会靠近文本框，但我认为这超出了这个问题的范围。

相关文章：