javascript - 让按钮做某事

Question

好吧，所以我有这个小的谷歌应用程序，我正在尝试将其组合在一起，并打算让它基于婴儿床笔记。有一个文本字段，其中有一个不起作用的按钮，上面写着“添加”、两个单选按钮和两个下拉菜单，每个下拉菜单用于一本书或一个故事。当我选中单选按钮、文本字段中的文本并单击“添加”时，我希望将文本发送到下拉菜单之一。
到目前为止，这是我的 HTML

    <h1>Crib Reader</h1>

<table align="center">
    <tr>
        <td style="width: 134px; ">
            <input type="radio" name="Reader" value="Book" style="vertical-align: middle" checked="checked">Book
            <input type="radio" name="Reader" value="Story" style="vertical-align: middle">Story
        </td>
        <td style="width: 162px; "><input type="text" name="Name" style="height: 20px;"></td>
        <td> <button type="button">Add</button> </td>
    </tr>
</table>
<br></br>
<table align="center" style="width: 316px; ">
    <tr>
        <td style="width: 115px; ">
            Books<br></br>
            <select id="Books" style="width: 100px; ">
                <option value=""></option>
            </select>
        </td>
        <td>
            <button type="button">Load</button>
        </td>

        <td style="width: 115px; ">
            Stories<br></br>
            <select id="Stories" style="width: 100px; ">
                <option value=""></option>
            </select>
        </td>
                    <td>
            <button type="button">Load</button>
        </td>
    </tr>
</table>
<hr>


  </body>
</html>

Answer 1

为 ADD 按钮添加一个 id: HTML:

<table align="center">
    <tr>
        <td style="width: 134px; ">
            <input type="radio" name="Reader" value="Book" style="vertical-align: middle" checked="checked">Book
            <input type="radio" name="Reader" value="Story" style="vertical-align: middle">Story
        </td>
        <td style="width: 162px; "><input type="text" name="Name" style="height: 20px;"></td>
        <td> <button type="button" id="add">Add</button> </td>
    </tr>
</table>

Js:

捕获点击事件并检查哪个单选按钮被选中并相应地在选择选项中添加值

$("#add").on("click",function(){
 if($('input[name="Reader"]:checked').val() == "Book"){
  $("#Books").append("<option>"+$("input[name='Name']").val()+"</option>");
  }else{
  $("#Stories").append("<option>"+$("input[name='Name']").val()+"</option>");
 }
})