选择的选项不使用 JQuery 选择答案

【问题标题】：selected option doesn't select using JQuery选择的选项不使用 JQuery 选择
【发布时间】：2021-07-20 09:12:55
【问题描述】：

我正在使用 JQuery 开发我的网络应用程序。我的选择选项菜单不打印选定的选项。

$(function() {
  $(document).on('click', ".class", function() {
    var id = $(this).attr("id");
    var index = $('#mySelect').val();

    if (id == "mySelect") {
      /*
        for(let i=0; i<3; i++)
             $("#mySelectOptionIndex"+i).attr("selected", false)

        $("#mySelectOptionIndex"+index).attr("selected", true)
      */

      $("#mySelect").val(index);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="mySelect" class="form-control form-control-sm class">
  <option id="mySelectOptionIndex0" value=0 selected> A </option>
  <option id="mySelectOptionIndex1" value=1> B </option>
  <option id="mySelectOptionIndex2" value=2> C </option>

我的代码正在运行并选择正确的选项，但它不打印所选的选项。使用浏览器，我看到 selected 属性已正确添加。我尝试使用 e.preventDefault();，使用 .prop(selected, true) 代替 .attr() 但没有解决方案。我该如何解决？谢谢

【问题讨论】：

首先，您的代码获取 select 的值，然后将已设置的相同值设置为元素的值...？为什么？这完全是多余的代码。这也是什么意思：'它不打印选定的选项'？
默认选择是 'value="0" '，A。当我单击并选择 'B' 时，我的选择始终显示默认值（在这种情况下为 A）。我试图通过代码选择，但它不起作用
但这就是select 元素默认的工作方式。您的 JS 代码无缘无故地导致了问题。只需删除它，HTML 就会自行运行。
if (id == 'mySelect') 的意义何在？为什么不直接将方法绑定到 ID 而不是类？
请注意，click 事件在用户点击菜单时触发，在他们选择一个新选项之前。因此，您将打印旧选项，而不是他们选择的选项。如果您想获得新选择的选项，请使用change 事件。

标签： javascript html jquery frontend ejs

【解决方案1】：

尝试访问选项值或选项 html：

$(function() {
        $(document).on('change', ".class", function() {
            var optionSelected = $("option:selected", this);
            
            var selectedText = $(optionSelected).html();
            var valueSelected = this.value;

            console.log(selectedText, valueSelected);
        });
    });

【讨论】：