jquery 代码不适用于所有选择选项

Question

jquery 代码不会针对我在 select 元素中的所有选项发出警报，而是 jquery 仅针对 Select 选项中的 1 个发出警报。请看下面的代码

我确实花了几个小时通过在线检查解决方案来解决这个问题，但没有成功

    <div>

      <h4>Company name</h4>

      <select class="form-control" id="sel1">

        <option></option>

        <option>Updated</option>

        <option>Validated</option>

      </select>

    </div>

    <div>

      <h4>Owner name</h4>

      <select class="form-control" id="sel1">

        <option></option>

        <option>Updated</option>

        <option>Validated</option>

      </select>

    </div>

    <div>

      <h4>Address </h4>

      <select class="form-control" id="sel1">

        <option></option>

        <option>Updated</option>

        <option>Validated</option>

      </select>

    </div>

    <div>

      <h4>Vertical</h4>

      <select class="form-control" id="sel1">

        <option></option>

        <option>Updated</option>

        <option>Validated</option>

      </select>

    </div>

 <div class="form-group" style="margin:100px;">

      <label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>

      <textarea class="comment-box" rows="5" id="comment"></textarea>

 </div>

    <script type="text/javascript">

$(document).ready(function(){

    $("#get_comment_button").on('click',function(){

        var optionText = $("#sel1 option:selected").text();

        if (optionText == "updated") {

          $("#comment").html("Team Updated on ");

        }else {

          $("#comment").html("Team Validated on ");

        }

    });

});

</script>

Answer 1

该ID属性对于每个文档都是唯一的，并且您的代码无法按预期方式工作，因为您正在重复相同的ID. 使用唯一 ID 或将事件附加到<select>另外作为旁注，console.log()用于调试而不是用于调试也是一个好习惯alert()var company_name = $('#company_name');var owner_name = $('#owner_name');var address = $('#address');var vertical = $('#vertical');$("#get_comment_button").on('click', function() {&nbsp; if (company_name.val() == "Updated" ||&nbsp; &nbsp; owner_name.val() == "Updated" ||&nbsp; &nbsp; address.val() == "Updated" ||&nbsp; &nbsp; vertical.val() == "Updated") {&nbsp; &nbsp; $("#comment").html("Team Updated on ");&nbsp; } else {&nbsp; &nbsp; $("#comment").html("Team Validated on ");&nbsp; }});<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><div>&nbsp; <h4>Company name</h4>&nbsp; <select id="company_name">&nbsp; &nbsp; <option></option>&nbsp; &nbsp; <option>Updated</option>&nbsp; &nbsp; <option>Validated</option>&nbsp; </select></div><div>&nbsp; <h4>Owner name</h4>&nbsp; <select id="owner_name">&nbsp; &nbsp; <option></option>&nbsp; &nbsp; <option>Updated</option>&nbsp; &nbsp; <option>Validated</option>&nbsp; </select></div><div>&nbsp; <h4>Address </h4>&nbsp; <select id="address">&nbsp; &nbsp; <option></option>&nbsp; &nbsp; <option>Updated</option>&nbsp; &nbsp; <option>Validated</option>&nbsp; </select></div><div>&nbsp; <h4>Vertical</h4>&nbsp; <select id="vertical">&nbsp; &nbsp; <option></option>&nbsp; &nbsp; <option>Updated</option>&nbsp; &nbsp; <option>Validated</option>&nbsp; </select></div><div class="form-group" style="margin:100px;">&nbsp; <label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button>&nbsp; <textarea class="comment-box" rows="5" id="comment"></textarea></div>

Answer 2

你用id的都是一样的<select>。ID 应该是唯一的。因此，您可以class在所有<select>标签中添加相同的内容。这是演示$(document).ready(function(){&nbsp; &nbsp; $(".sel1").on('change',function(){var optionText = $(this).children("option:selected").text();&nbsp; &nbsp; &nbsp; &nbsp; alert("Selected Option Text: "+optionText);&nbsp; &nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div><h4>Company name</h4>&nbsp;<select id="sel1" class="sel1">&nbsp; <option></option>&nbsp; <option>Updated</option>&nbsp; <option>Validated</option></select>&nbsp;</div><div><h4>Owner name</h4>&nbsp;<select id="sel1" class="sel1">&nbsp; <option></option>&nbsp; <option>Updated</option>&nbsp; <option>Validated</option></select>&nbsp;</div><div><h4>Address </h4>&nbsp;<select id="sel1" class="sel1">&nbsp; <option></option>&nbsp; <option>Updated</option>&nbsp; <option>Validated</option></select>&nbsp;</div><div>&nbsp; <h4>Vertical</h4>&nbsp;<select id="sel1" class="sel1">&nbsp; <option></option>&nbsp; <option>Updated</option>&nbsp; <option>Validated</option></select>&nbsp;</div><div class="form-group" style="margin:100px;">&nbsp;<label for="comment" style="float:left;">Comment:</label> <button class="btn btn-primary btn-xs" id="get_comment_button" role="button" style="float:left;">Get Comment</button><textarea class="comment-box" rows="5" id="comment"></textarea>&nbsp;</div>