JQuery код не работает для всех вариантов выбора

Question

Код jquery не предупреждает обо всех опциях, которые есть в элементе select, вместо этого jquery предупреждает только о 1 из опции Select. Пожалуйста, смотрите код ниже

Я потратил часы, чтобы получить это исправление, проверив решение онлайн, но безуспешно

    <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. Либо используйте уникальные идентификаторы, либо прикрепите событие к <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>. Идентификатор должен быть уникальным. Таким образом, вы можете добавить одинаковые 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>