Javascript 在表中选择“标记不使用提交”按钮

我有一张桌子，里面有一张和两张。第一个显示一个下拉列表，其中包含用户选择的书籍列表，第二个显示一个按钮，该按钮将在选择书籍后触发一个功能。该按钮工作正常，但问题是，即使将该选项设置为“选择图书标题”，该按钮也会触发该功能，而仅当选择了图书名称而不是要求用户选择图书的标题时，该按钮才会工作

<table>
  <tr>
    <td>
      <div class="" style="position:relative" >
        <select id="test">
          <option value="" disabled="disabled" selected="selected">Select Book</option>

          <?php
            //API calls happening to get the list of books
          ?>

          <option value="<?php //echo id of each book; ?>"><?php //echo name of books ?></option>
        </select>
      </div>
    </td>

    <td>
      <input type="submit" value="Add to Cart" onclick="addBook()">
    </td>
  </tr>   
</table>

下面是我点击按钮运行的javascript

function addBook() {

        //getting product name and append it in the report table
        var BookName = $("#test option:selected").text();
        var tr = "<tr><td>" + BookName + "</td></tr>";
        $("#SecondTable").append(tr);
    }

正如您在上面的JS中看到的，我还将打印selectbook，因为它假设selectbook是一个书名

foo将其设置为不可选择值。它不会阻止您提交表单

如果要在提交前验证表单，请编写在表单的onsubmit中执行的验证函数。如果搜索表单验证，您可以找到许多有关如何执行此操作的示例

---

还要记住，禁用选项只是一个建议。表单用户仍然可以提交他们喜欢的任何值，甚至可以绕过验证函数。验证必须在服务器上进行。无论您在HTML中做什么都很好。

您可以先检查所选选项是否已禁用，然后尝试加载视图，请检查我编辑的函数

function addBook() {
//getting product name and append it in the report table
var selectedbook = $("#test option:selected");
if(!selectedbook.is(":disabled"))
{ 
  var BookName = selectedbook.text();
  var tr = "<tr><td>" + BookName + "</td></tr>";
  $("#SecondTable").append(tr);
}
}

---

你的js代码在哪里？@BhojendraSah，请参考上面的js。我是否可以通过验证来询问你的意思，比如js中的if语句，它检查选择值是否不是Select Book，然后应用addBook函数？