как удалить атрибут выбранной опции внутри модального

Question

У меня проблема с удалением атрибута, выбранного в опции

мой выбор находится внутри модального режима, когда моя опция загрузки страницы строится динамически, как это

 <select class="form-control" id="petselect" name="petselect">
          <?php
               foreach ($pest as $pet){
                    echo "<option value='".$pet->id."'>$pet->name</option>";
                }
          ?>
  </select>

, когда я редактирую форму Появится модал, и я выбрал по умолчанию pet-> id

<select class="form-control" id="petselect" name="petselect">
    <option value="1">pet1</option>
    <option value="2" selected="selected">pet2</option>
    <option value="3">pet3</option>
    <option value="4">pet4</option>
    <option value="5">pet5</option>
    <option value="6">pet6</option>
    <option value="7">pet7</option>
    <option value="8">pet8</option>
    <option value="9">pet9</option>
</select>

Теперь, когда я изменю его на pet5 и отправлю форму через ajax, мой модал будет скрыт, когда я снова отредактирую выбранную опцию Отображается pet5, но когда я смотрю на исходный код, вот как он выглядит, 2 выбранных атрибута.

<select class="form-control" id="petselect" name="petselect">
    <option value="1">pet1</option>
    <option value="2" selected="selected">pet2</option>
    <option value="3">pet3</option>
    <option value="4">pet4</option>
    <option value="5" selected="selected">pet5</option>
    <option value="6">pet6</option>
    <option value="7">pet7</option>
    <option value="8">pet8</option>
    <option value="9">pet9</option>
</select>

это мой js для добавления выбранного атрибута, когда я редактирую форму

$('#petselect option')
  .filter(function() { return  $(this).val()  === petID; })
  .attr('selected',true);

и код моего модала, когда он прячется.

 $('#petselectmodal').on('hidden.bs.modal', function () {
                $('#petselect option:selected')
                .removeAttr('selected');
            });

Answer 1

Это следует делать не на <option>, а на уровне <select>. Параметры в основном визуальные индикаторы. Элемент, который имеет имя и, следовательно, значение, является элементом выбора. Используйте $('#petselect").val(5);, и тогда форма будет читать это значение. Плюс HTML также обновит Опцию.

$(function() {
  $("button").click(function() {
    $("#petselect").val(5);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
  <option value="1">pet1</option>
  <option value="2" selected="selected">pet2</option>
  <option value="3">pet3</option>
  <option value="4">pet4</option>
  <option value="5">pet5</option>
  <option value="6">pet6</option>
  <option value="7">pet7</option>
  <option value="8">pet8</option>
  <option value="9">pet9</option>
</select>
<button>Change</button>

Вы можете сделать это вручную, если захотите.

$(function() {
  $("button").click(function() {
    $("#petselect").val("");
    $("#petselect option").prop("selected", false);
    $("#petselect").val(5);
    $("#petselect option[value='" + 5 + "']").prop("selected", true);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="petselect" name="petselect">
  <option value="1">pet1</option>
  <option value="2" selected="selected">pet2</option>
  <option value="3">pet3</option>
  <option value="4">pet4</option>
  <option value="5">pet5</option>
  <option value="6">pet6</option>
  <option value="7">pet7</option>
  <option value="8">pet8</option>
  <option value="9">pet9</option>
</select>
<button>Change</button>