如何删除模式中的属性选定选项
如何删除模式中的属性选定选项
提问于 2020-04-11 01:02:49
我在删除选项中选择的属性时出现问题
当我的页面加载选项像这样动态构建时，我的select位于模式中
<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提交表单时，我的模式将隐藏，当我再次编辑时，将显示选项selected 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');
});回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-11 01:18:42
这不应该在<option>上完成，而应该在<select>级别上完成。这些选项基本上都是一个可视化的指示器。具有名称和值的元素是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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61145089
复制相关文章
相似问题
腾讯云开发者
