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() {

  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>

Answer 2

你用id的都是一样的<select>。ID 应该是唯一的。因此，您可以class在所有<select>标签中添加相同的内容。

这是演示

$(document).ready(function(){

    $(".sel1").on('change',function(){

var optionText = $(this).children("option:selected").text();

        alert("Selected Option Text: "+optionText);

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

<h4>Company name</h4>

 <select id="sel1" class="sel1">

  <option></option>

  <option>Updated</option>

  <option>Validated</option>

</select> 

</div>

<div>

<h4>Owner name</h4>

 <select id="sel1" class="sel1">

  <option></option>

  <option>Updated</option>

  <option>Validated</option>

</select> 

</div>

<div>

<h4>Address </h4>

 <select id="sel1" class="sel1">

  <option></option>

  <option>Updated</option>

  <option>Validated</option>

</select> 

</div>

<div>

  <h4>Vertical</h4>

 <select id="sel1" class="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>