如何删除模态中的属性选择选项

Question

我在删除选项中选择的属性时遇到问题

当我的页面加载选项像这个一样动态构建时，我的选择在模态中

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

当我编辑表单时，模态将显示，我选择了默认的宠物->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>级别上执行。选项基本上是一个视觉指示器。具有Name和Value的元素就是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>