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

Question

jquery 代码不会针对 select 元素中的所有选项发出警报，而是仅针对 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() {

  if (company_name.val() == "Updated" ||
    owner_name.val() == "Updated" ||
    address.val() == "Updated" ||
    vertical.val() == "Updated") {
    $("#comment").html("Team Updated on ");
  } else {
    $("#comment").html("Team Validated on ");
  }
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div>
  <h4>Company name</h4>
  <select id="company_name">
    <option></option>
    <option>Updated</option>
    <option>Validated</option>
  </select>
</div>
<div>
  <h4>Owner name</h4>
  <select id="owner_name">
    <option></option>
    <option>Updated</option>
    <option>Validated</option>
  </select>
</div>
<div>
  <h4>Address </h4>
  <select id="address">
    <option></option>
    <option>Updated</option>
    <option>Validated</option>
  </select>
</div>
<div>
  <h4>Vertical</h4>
  <select id="vertical">
    <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>