让按钮做某事

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

给添加按钮添加一个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>");
 }
})